CODEWITHSUNDEEP
javascriptjqueryjquery-ui-autocomplete
CMartins
CMartins

Reputation: 3293

Jquery Autocomplete display names and send Id

How can I change my jQuery autocomplete to use an Id instead of my values? I would like to display the list of names but send a search using the Id value. Now it is working properly with the names but I think it will be more effective if it tries to find a unique value as an ID.

$.getJSON('Dashboard/CompaniesWithId', function (data) {
  $.each(data, function (i, item) {
    sellers[i] = item.Name;
    sellersID[i] = item.Id;
  });
}).error(function () {
  console.log("error loading seller to the autocomplete");
});

$("#searchSeller").autocomplete({
  messages: {
    noResults: 'No sellers with this name',        
  },
  minLength: 2,
  delay: 500,
  source: sellers,
});

Upvotes: 1

Views: 4337

Answers (2)

am05mhz
am05mhz

Reputation: 2875

you can add a hidden field and use the on select event to set the value of the hidden field to the selected id

http://api.jqueryui.com/autocomplete/#event-select

you can also use selection data with format [{value: 'value', label: 'label'}] but using this way, the field will show the id instead of the label

var availableTags = [
      {id: 1, label: "ActionScript"},
      {id: 2, label: "Ruby"},
      {id: 3, label: "Scala"},
      {id: 4, label: "Scheme"}
    ];
    availableTags2 = [
      {value: 1, label: "ActionScript"},
      {value: 2, label: "Ruby"},
      {value: 3, label: "Scala"},
      {value: 4, label: "Scheme"}
    ];
    $( "#a" ).autocomplete({
      source: availableTags,
      select: function( event, ui ) {
        $('#tosend').val(ui.item.id);
      }
    });
    $( "#b" ).autocomplete({
      source: availableTags2
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
			  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
			  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
			  crossorigin="anonymous"></script>
id to send<br>
<input type="text" name="tosend" id="tosend"><br><br>
type below<br>
<input id="a"><br>
<br>
<br>
using value instead of id<br>
<input id="b">

Upvotes: 2

Gene M
Gene M

Reputation: 418

I don't know anything about your back-end. But assuming it is accepting IDs for your search parameters, will changing the source value to sellersID resolve your issue? You also have that extra comma after sources. It will cause you problems.

$("#searchSeller").autocomplete({
  messages: {
    noResults: 'No sellers with this ID.',        
  },
  minLength: 2,
  delay: 500,
  source: sellersID
});

Upvotes: -1

Related Questions