[jQuery] Autocomplete problems with multiple fields
Greetings,
I'm working on adding autocomplete to a form which describes a
discussion paper. Each paper can have multiple authors and I want to
provide autocomplete on the author names. I'm new to jQuery so this
code is kind of rough.
My java script is:
// Begin
function parse_search(data) {
var result = [];
for (var i = 0; i < data.names.length; i++) {
result[i] = { data: data.names[i].name,
value: data.names[i].id,
result: data.names[i].name
};
}
return result;
}
function format_item(row, i, max) {
return row;
}
function set_author_autocomplete()
{
var searchurl = $("#authsearch_url").attr("href");
$(".author_name").each(function (i) {
$(this).autocomplete(searchurl, {
dataType: 'json',
parse: parse_search,
formatItem: format_item
}
)
}
);
}
$(document).ready(set_author_autocomplete);
//End
The corresponding snippet of HTML is:
<!-- ===================================== -->
<fieldset class="authors">
<legend>Authors (list in order)</legend>
<p class="note"> Author names must be entered in proper format
such that BibTeX 0.99 will parse them correctly. 'Last, Suffix,
First' is required for use with suffixes.
<p class="note"> To remove an author, empty the corresponding
field. Leave it blank.
<input name="author_count" type="hidden" value="1"
id="author_count" />
<div class="author">
<input name="authors.author_id_1" type="hidden"
id="authors.author_id_1" />
<input name="authors.rank_1" type="hidden" value="1"
id="authors.rank_1" />
<span class="author text label">
<label for="authors.name_1">Author</label>
<input name="authors.name_1" type="text" value="Robert L
Wolpert" class="author_name" id="authors.name_1" />
</span>
</div>
</fieldset>
<!-- ===================================== -->
This works fine with just _one_ author listed. If I use this exact same
pattern on a web page with multiple authors listed, such as this html
snippet:
<!-- ===================================== -->
<fieldset class="authors">
<legend>Authors (list in order)</legend>
<p class="note"> Author names must be entered in proper format
such that BibTeX 0.99 will parse them correctly. 'Last, Suffix,
First' is required for use with suffixes.
<p class="note"> To remove an author, empty the corresponding
field. Leave it blank.
<input name="author_count" type="hidden" value="3"
id="author_count" />
<div class="author">
<input name="authors.author_id_1" type="hidden" value="1552"
id="authors.author_id_1" />
<input name="authors.rank_1" type="hidden" value="1"
id="authors.rank_1" />
<span class="author text label">
<label for="authors.name_1">Author</label>
<input name="authors.name_1" type="text" value="John
Doe" class="author_name" id="authors.name_1" />
</span>
</div>
<div class="author">
<input name="authors.author_id_2" type="hidden" value="1553"
id="authors.author_id_2" />
<input name="authors.rank_2" type="hidden" value="2"
id="authors.rank_2" />
<span class="author text label">
<label for="authors.name_2">Author</label>
<input name="authors.name_2" type="text" value="Fred
Nobody" class="author_name" id="authors.name_2" />
</span>
</div>
<div class="author">
<input name="authors.author_id_3" type="hidden"
id="authors.author_id_3" />
<input name="authors.rank_3" type="hidden"
id="authors.rank_3" />
<span class="author text label">
<label for="authors.name_3">Author</label>
<input name="authors.name_3" type="text"
class="author_name" id="authors.name_3" />
</span>
</div>
</fieldset>
<!-- ===================================== -->
The autocomplete doesn't work right. Firebug indicates the autocomplete
is added to the fields, evidenced by the ac_input class being added to
each of the input fields, but I receive the following error when I start
typing:
[Exception... "'JavaScript component does not have a method named:
"handleEvent"' when calling method: [nsIDOMEventListener::handleEvent]"
nsresult: "0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED)"
location: "<unknown>" data: no]
http://www.stat.duke.edu/research/wp/assets/js/jquery.js
Line 1296
[Exception... "'JavaScript component does not have a method named:
"handleEvent"' when calling method: [nsIDOMEventListener::handleEvent]"
nsresult: "0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED)"
location: "<unknown>" data: no]
Line 0
I'm new to Javascripting and at a total loss. Any assistance would be
appreciated.
--[Lance]
--
GPG Fingerprint: 409B A409 A38D 92BF 15D9 6EEE 9A82 F2AC 69AC 07B9
CACert.org Assurer