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> <p class="note"> To remove an author, empty the corresponding field. Leave it blank. </p> <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> <p class="note"> To remove an author, empty the corresponding field. Leave it blank. </p> <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]
