[jQuery] Autocomplete: Problem putting autocomplete on 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.
In the head section of the page I load the necessary js files:
<link rel="stylesheet" href="http://xxx/research/wp/assets/css/
form.css" type="text/css"/>
<link rel="stylesheet" href="http://xxx/research/wp/assets/css/
jquery.autocomplete.css" type="text/css"/>
<script src="http://xxx/research/wp/assets/js/jquery.js" type="text/
javascript"></script>
<script src="http://xxx/research/wp/assets/js/jquery.bgiframe.min.js"
type="text/javascript"></script>
<script src="http://xxx/research/wp/assets/js/jquery.ajaxQueue.js"
type="text/javascript"></script>
<script src="http://xxxresearch/wp/assets/js/jquery.autocomplete.js"
type="text/javascript"></script>
<script src="http://xxx/research/wp/assets/js/author_autocomplete.js"
type="text/javascript"></script>
author_autocomplete.js 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]