Jquery UI autocomplete event change

Question

Hi I got a problem with change event. By documntation there should be object ui.item

After an item was selected; ui.item refers to the selected item. Always triggered after the close event.

But when I try it ui.item is undefined :( I want unset s_town_id when input in autocomplete doesn't match with data from script.

<input id="s_town" type="text" name="s_town" />
<input type="text" id="s_town_id" name="s_town_id"  />


    
 $(function() {
  $("#s_town").autocomplete({
   source: function(request, response) {
    $.ajax({
     url: "/_system/_ajax/uiautocomplete.php",
     dataType: "json",
     data: {
      name: "s_town",
      term: request.term
     },
     success: function(data) {
      response($.map(data, function(item) {
       return {
        label: item.whisper_name+ " [" + item.zip_code + " / " + item.lup_state + "]",
        value: item.whisper_name,
        id: item.whisper_id, 
        zip_code: item.zip_code, 
        lup_state: item.lup_state, 
        stateid: item.stateid
       }
      }))
     }
    })
   },
   minLength: 2,
   select: function(event, ui) {
    $("#s_town_id").val(ui.item.id);
   },
   change: function(event, ui)
   {
    // ui.item is undefined :( where is the problem?
    $("#s_town_id").val(ui.item.id);
   }

  });


 });

Hey Stenly, i'm having the exact same issue, and having to use the same workaround. Were you able to find a better solution? — blacktie24
– blacktie24, Commented Apr 2, 2011 at 22:49
hmm realized that the problem was that I loaded the source code from a tutorial, which had ui version 1.8, this was fixed in 1.8.11 for anyone who ends up having this problem. bugs.jqueryui.com/ticket/5490 — blacktie24
– blacktie24, Commented Apr 3, 2011 at 4:39

Stenly.k · Accepted Answer · 2010-05-13 06:07:59Z

I find out solution where I testing event.originalEvent.type if it is meneuselected or not and after fail I unset s_town_id. But any better solution is still wellcome.

<input id="s_town" type="text" name="s_town" />
<input type="text" id="s_town_id" name="s_town_id"  />


    
 $(function() {
  $("#s_town").autocomplete({
   source: function(request, response) {
    $.ajax({
     url: "/_system/_ajax/uiautocomplete.php",
     dataType: "json",
     data: {
      name: "s_town",
      term: request.term
     },
     success: function(data) {
      response($.map(data, function(item) {
       return {
        label: item.whisper_name+ " [" + item.zip_code + " / " + item.lup_state + "]",
        value: item.whisper_name,
        id: item.whisper_id, 
        zip_code: item.zip_code, 
        lup_state: item.lup_state, 
        stateid: item.stateid
       }
      }))
     }
    })
   },
   minLength: 2,
   select: function(event, ui) {
    $("#s_town_id").val(ui.item.id);
   },
   change: function(event, ui)
   {
    try
    {
        if(event.originalEvent.type != "menuselected")
        {
             // Unset ID
             $("#s_town_id").val("");
        }
    }
    catch(err){ 
        // unset ID 
        $("#s_town_id").val("");
    }
   }

  });


 });

Maxime · Accepted Answer · 2010-06-01 23:31:54Z

0

if ui.item is not defined that means your json source is not well formed. You have to send a json source like this:

[{"label":"Jean","value":1},{"label":"carl","value":2}]

You can add more key to the array but at least you have to set "label" and "value". Check the json string. Also I reckon you to use the last version of autocomplete 1.8.1 at the moment

answered Jun 1, 2010 at 23:31

Maxime

1 Comment

Stenly.k Over a year ago

Yee but I want solution for moment when input value is not match to any record in DB. So in that moment JSON is empty. The funcionality which I want can be describe as must match.

Collectives™ on Stack Overflow

Jquery UI autocomplete event change

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related