[jQuery] Re: Autocomplete problems with multiple fields

[Lance A. Brown]

Tom Worster wrote:
 
 what autocomplete plugin are you using? this one does not have a documented
 parse option: 
 http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

Its the standard autocomplete plugin available at
http://docs.jquery.com/Plugins/Autocomplete

I found the syntax for handling json data in it on another web page.

 
 two more points, though i don't know if they make any odds:
 
 it seems to be more conventional jq style (see
 http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery) to put all
 your jq script inside  a block like this:
 
  $(document).ready(function() {  });

I'm going to need to be able to call the autocomplete setup function
again later so I pulled it into a separate function.

 and is there a reason to prefer:
   $(.author_name).each(function (i) { $(this).autocomplete(); });
 over
   $(.author_name).autocomplete();
 ?

This was me struggling to figure out what was wrong with my code, which
I did figure out this morning.  I've removed the call to 'each'.

And now for the solution to my problem.  This bit of js:

  var searchurl = $(#authsearch_url).attr(href);

extracts the url I'm giving to autocomplete from the web page, allowing
me to use my templating system to set that URL.  Idiot me failed to
include that html fragment in the 2nd page, where I edit a paper,
therefor causing autocomplete to fail because it had a bad url.

Once I realized my error it was the work of a moment to correct things
and get autocomplete working properly.

--[Lance]


-- 
 GPG Fingerprint: 409B A409 A38D 92BF 15D9 6EEE 9A82 F2AC 69AC 07B9
 CACert.org Assurer

[jQuery] Re: Autocomplete problems with multiple fields

[Lance A. Brown]

Tom Worster wrote:
 On 4/17/09 12:49 PM, Lance A. Brown la...@bearcircle.net wrote:
 I found the syntax for handling json data in it on another web page.
 
 standard warnings on using undocumented api features apply.

It's undocumented in the autocomplete API but is a clearly documented
option in the jQuery.ajax options.  autocomplete simply passes it through.

--[Lance]

-- 
 GPG Fingerprint: 409B A409 A38D 92BF 15D9 6EEE 9A82 F2AC 69AC 07B9
 CACert.org Assurer

[jQuery] Autocomplete problems with multiple fields

[Lance A. Brown]

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
legendAuthors (list in order)/legend
p class=note Author names must be entered in proper format
such that BibTeX 0.99 will parse them correctly.  #39;Last, Suffix,
First#39; 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_1Author/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
legendAuthors (list in order)/legend
p class=note Author names must be entered in proper format
such that BibTeX 0.99 will parse them correctly.  #39;Last, Suffix,
First#39; 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_1Author/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_2Author/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_3Author/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