Question

First, sorry about the title of this question. I thought about it for a long time and could do no better.

My question is: can jQueryUI’s autocomplete feature provide suggestions from multiple database fields under one autocomplete field. For instance, I’d want to be able to type in “br” in the field and have both “briman057” and “Brian Johnson” appear as suggestions even though they are stored in separate database fields and are returned as two separate key value pairs of the same JSON item (ie. [{username : briman057, name : ‘Brian Johnson’]}). I’d then want the username value to be the one that populates the field when either it or the full name are selected. I know that one of the keys needs to be named “value” or “label” and that the key by that name is the one that is used to provide suggestions, but can I essentially have two “value” keys for one JSON item?

Answer 1

Yes, it can, because you provide your own custom callback as a datasource. That callback can implement the behaviour you desire.

Here’s a demo of what I think you want.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function() {
  $('#myautocomplete').autocomplete({
    source: function(request, response) {
      // TODO: make suggestions actually depend on what the user types into the search box.

      // You want two suggestions, one with 'briman57' and one with 'Brian Johnson', so we need two suggestions with different labels, but with the same value.
      var suggestions = [
        { label: 'briman057'    , value: 'briman057', username : 'briman057', name : 'Brian Johnson'},
        { label: 'Brian Johnson', value: 'briman057', username : 'briman057', name : 'Brian Johnson'}
      ];
      response(suggestions);
    },
    select: function( event, ui ) {
      alert('You have selected ' + ui.item.name + ' (' + ui.item.username + ')');
    }
  });
});
</script>
<input id="myautocomplete" title="Enter anything here."></input>

Take a look at the source code of the Remote JSONP datasource example for more inspiration.