Предложения по нескольким значениям в одном поле - jQueryUI Autocomplete

Question

Во-первых, извините за заголовок этого вопроса. Я долго думал об этом и ничего не мог поделать.

Мой вопрос: может ли функция автозаполнения jQueryUI предоставлять подсказки из нескольких полей базы данных в одном поле автозаполнения? Например, я хотел бы иметь возможность ввести «br» в поле, и оба «briman057» и «Brian Johnson» отображаются как предложения, даже если они хранятся в отдельных полях базы данных и возвращаются как два отдельных значения ключа пары одного и того же элемента JSON (т. е. [{username: briman057, name: 'Brian Johnson']}). Затем я бы хотел, чтобы значением имени пользователя было то, которое заполняет поле, когда выбрано либо его, либо полное имя. Я знаю, что один из ключей должен называться «value» или «label», и что ключ с таким именем является тем, который используется для предоставления предложений, но могу ли я по существу иметь два «value» ключа для одного элемента JSON?

Answer 1

Да, может, потому что вы предоставляете свой собственный обратный вызов в качестве источника данных. Этот обратный вызов может реализовать желаемое вами поведение.

Вот демонстрация того, что, я думаю, вы хотите.

<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>

Взгляните на исходный код примера Удаленный источник данных JSONP , чтобы узнать больше