How do I override the default behavior of select: within jQuery UI Autocomplete?

Question

I have the following:

$('#<%=txtCity.ClientID%>').autocomplete({
  source: function (request, response) {
    var parameters = {
      isoalpha2: '<%=Session["BusinessCountry"].ToString()%>',
      prefixText: request.term
    };
    $.ajax({
      url: '<%=ResolveUrl("~/AtomicService/Assets.asmx/GetCitiesWithState")%>',
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json; charset=utf-8',
      data: JSON.stringify(parameters),
      success: function (data) {
        response($.each(data.d, function (index, value) {
          return {
            label: value.slice(value.indexOf(',')),
            value: parseInt(value.split(',')[0])
          }
        }));
      }

    });
  },
  minLength: 2,
  delay: 50,
  select: function (event, ui) {
    var city = ui.item.label.split(',')[0];
    var state = ui.item.label.split(',')[1];
    alert(city);
    alert(state);
    $('#<%=txtCity.ClientID%>').val(city);
    $('#<%=txtState.ClientID%>').val(state);
  },
});

It's all happy days, except when I select an item from the autocomplete list I'd like to not have autocomplete populate the $('#<%=txtCity.ClientID%>') element. How do I do it? I saw .insertAfter, is that something I should look at?

Help appreciated.

Aliped

I assume this includes ASP.NET code? – Ankylosis

Answer 1

Try returning false from the select event:

...
select: function(event, ui) {
    var city = ui.item.label.split(',')[0];
    var state = ui.item.label.split(',')[1];
    alert(city);
    alert(state);
    $('#<%=txtCity.ClientID%>').val(city);
    $('#<%=txtState.ClientID%>').val(state);
    return false;
},

From the documentation (select event):

Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

You can try it here.

Cockleshell

Answer 2

While it probably won't make a difference here, instead of returning false, you should be saying event.preventDefault

See event.preventDefault() vs. return false

It's bad practice to always stop propagation of the event when you don't need to.

Convulsive