Hi I have the code below for autoplete which works fine but my only issue is that when a user clicks on an option from the autoplete list, it should trigger another function (doSomething()). This however is not being done. Granted if the user makes a selection and presses "enter" the function is executed.

var url = "http://myURL";
var field = "myField";

$(document).ready(function () {
  $("#tags").autoplete({  
      source: function (req, add) {
          var suggestions = search(req.term, url, field);
          add(suggestions);  
      },
       select: function( event, ui ) {
        doSomething();          
  }
  });

 });  


function search(value, listurl, field) {
  var coll = new Array();
  var url =  
      listurl + "?$filter=startswith(" + field + ",'" + value + "')";

  $.ajax({
      cache: true,
      type: "GET",
      async: false,
      dataType: "json",
      url: url,  
      success: function (data) {
          var results = data.d.results;
          for (att in results) {
              var object = results[att];
              for (attt in object) {
                  if (attt == field) {
                      coll.push(object[attt]);
                  }
              }
          }
      }

  });
  return coll;}

function doSomething() {
}

Thanks for any suggestions.

Hi I have the code below for autoplete which works fine but my only issue is that when a user clicks on an option from the autoplete list, it should trigger another function (doSomething()). This however is not being done. Granted if the user makes a selection and presses "enter" the function is executed.

var url = "http://myURL";
var field = "myField";

$(document).ready(function () {
  $("#tags").autoplete({  
      source: function (req, add) {
          var suggestions = search(req.term, url, field);
          add(suggestions);  
      },
       select: function( event, ui ) {
        doSomething();          
  }
  });

 });  


function search(value, listurl, field) {
  var coll = new Array();
  var url =  
      listurl + "?$filter=startswith(" + field + ",'" + value + "')";

  $.ajax({
      cache: true,
      type: "GET",
      async: false,
      dataType: "json",
      url: url,  
      success: function (data) {
          var results = data.d.results;
          for (att in results) {
              var object = results[att];
              for (attt in object) {
                  if (attt == field) {
                      coll.push(object[attt]);
                  }
              }
          }
      }

  });
  return coll;}

function doSomething() {
}

Thanks for any suggestions.

• javascript
• jquery
• jquery-ui
• autoplete

Share Improve this question Follow asked May 8, 2014 at 13:47 sw6 - KTBFFHsw6 - KTBFFH 20711 gold badge55 silver badges1616 bronze badges 2

• Can't you assign callback function directly as select: doSomething – Ravi Dhoriya ツ Commented May 8, 2014 at 13:49
• @log1c I tried that but didn't work for me. – sw6 - KTBFFH Commented May 8, 2014 at 14:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Got this resolved like this:

$('#tags').on('keyup change', function () {
        doSomething();
    }).change();

$('#tags').on('autopleteselect', function (e, ui) {
    doSomething();
    });

Thanks to this SO link

I know this is an old topic, but I came across this problem and I found another solution which I believe JQuery provides for. You can use the close event to do this.

Examples (extracted from http://api.jqueryui./autoplete/ and adapted for this question):

1) When you initialize the autoplete

$( "#tags" ).autoplete({
  close: function( event, ui ) { doSomething(); }
});

or

2) Binding an listener to the close event

$( "#tags" ).on( "autopleteclose", function( event, ui ) { doSomething(); } );