jQuery UI autocomplete с элементом и идентификатором

Question

У меня есть следующий скрипт, который работает с 1-мерным массивом. Можно ли заставить это работать с 2-мерным массивом? Затем, какой бы элемент ни был выбран, щелкнув по второй кнопке на странице, должен отобразиться идентификатор выбранного элемента.

Это сценарий с 1 одномерным массивом:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]; 
$("#txtAllowSearch").autocomplete({ 
    source: $local_source 
}); 

Это скрипт для кнопки, чтобы проверить идентификатор, который является неполным:

$('#button').click(function() { 
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item); 
}); 

Answer 1

Вы должны использовать пользовательский интерфейс .item.label (текст) и ui.item.value (идентификатор) свойства

$('#selector').autocomplete({ 
    source: url, 
    select: function (event, ui) { 
     $("#txtAllowSearch").val(ui.item.label); // display the selected text 
     $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input 
    } 
}); 

$('#button').click(function() { 
    alert($("#txtAllowSearchID").val()); // get the id from the hidden input 
}); 

[Edit] Вы также спросили, как создать многомерный массив ...

Вы должны быть в состоянии создать массив как так:

var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], 
        [4,"javascript"], [5,"asp"], [6,"ruby"]]; 

Подробнее о том, как работать с многомерными массивами здесь: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

Answer 2

С Обзор вкладка JQuery автозаполнения плагин:

локальные данные могут быть простой массив из строк, или содержит объекты для каждый элемент массива, либо с меткой или значением , либо с обоими параметрами. Свойство метки отображается в меню предложений . Значение будет , вставленное во входной элемент после , пользователь выбрал что-то из меню . Если указано только одно свойство: , оно будет использовано для обоих, например. если вы указали только значения свойств , в качестве метки также будет использовано значение .

Таким образом, ваш «двумерный» массив может выглядеть следующим образом:

var $local_source = [{ 
    value: 1, 
    label: "c++" 
}, { 
    value: 2, 
    label: "java" 
}, { 
    value: 3, 
    label: "php" 
}, { 
    value: 4, 
    label: "coldfusion" 
}, { 
    value: 5, 
    label: "javascript" 
}, { 
    value: 6, 
    label: "asp" 
}, { 
    value: 7, 
    label: "ruby" 
}]; 

Вы можете получить доступ к этикетке и значение свойства внутри focus и select события через ui аргумента, используя ui.item.label и ui.item.value.

Редактировать

Похоже, вы должны «отменить» фокус и выбрать события, так что он не ставит идентификационные номера внутри текстовых полей. При этом вы можете скопировать значение в скрытую переменную. Here is an example.

Answer 3

<script type="text/javascript"> 
$(function() { 
    $("#MyTextBox").autocomplete({ 
     source: "MyDataFactory.ashx", 
     minLength: 2, 
     select: function (event, ui) { 
      $('#MyIdTextBox').val(ui.item.id); 
      return ui.item.label; 
     } 
    }); 
}); 

Вышеприведенные ответы помогли, но не работает в моей реализации. Вместо того, чтобы устанавливать значение с помощью jQuery, я возвращаю значение из функции в параметр выбора.

The MyDataFactory.На странице ashx есть класс с тремя свойствами Id, Label, Value.

Передайте список в сериализатор JavaScript и верните ответ.

Answer 4

Мой код работал только тогда, когда я добавил 'return false' в функцию select. Без этого вход был установлен с правильным значением внутри функции выбора, а затем после установки функции выбора было установлено значение id. Ответ на ложную проблему решил.

$('#sistema_select').autocomplete({ 

    minLength: 3, 
    source: <?php echo $lista_sistemas;?> , 
    select: function (event, ui) { 
     $('#sistema_select').val(ui.item.label); // display the selected text 
     $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input 
     return false; 
    }, 
    change: function(event, ui) { 
     $("#sistema_select_id").val(ui.item? ui.item.value : 0); 
    } 
}); 

Кроме того, я добавил функцию к событию изменения, поскольку, если пользователь пишет что-то на входе или стирает часть ярлыка элемента после того, как был выбран один элемент, мне нужно обновить скрытое поле так что я не ошибаюсь (устаревший) id. Например, если мой источник:

var $local_source = [ 
     {value: 1, label: "c++"}, 
     {value: 2, label: "java"}] 

и типа JA пользователя и выбрать опцию «Java» с автозаполнением, хранить значение 2 в скрытом поле. Если пользователь стирает письмо из «java», например, заканчивая «jva» в поле ввода, я не могу передать моему коду id 2, потому что пользователь изменил значение. В этом случае я устанавливаю идентификатор 0.

Answer 5

Просто хочу поделиться тем, что сработало на моем конце, на случай, если оно сможет помочь кому-то еще. В качестве альтернативы на основе ответа Пати Lustosa в выше, пожалуйста, позвольте мне добавить еще один подход, производный от этого места, где он использовал AJAX подход для исходного метода

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

Кикер, в результате «строка» или формат JSON из ваш PHP скрипт (listing.php ниже), который получает набор результатов, которые будут показаны в поле автозаполнения должно последовать что-то вроде этого:

{"list":[ 
    {"value": 1, "label": "abc"}, 
    {"value": 2, "label": "def"}, 
    {"value": 3, "label": "ghi"} 
    ]} 

Затем на исходном части способа автозаполнения:

source: function(request, response) { 
     $.getJSON("listing.php", { 
      term: request.term 
     }, function(data) {      
      var array = data.error ? [] : $.map(data.list, function(m) { 
       return { 
        label: m.label, 
        value: m.value 
       }; 
      }); 
      response(array); 
     }); 
    }, 
    select: function (event, ui) { 
     $("#autocomplete_field").val(ui.item.label); // display the selected text 
     $("#field_id").val(ui.item.value); // save selected id to hidden input 
     return false; 
    } 

Надеюсь, это поможет ... все лучшее!

Answer 6

Я не думаю, что вам нужно взломать свойства и метки, использовать скрытые поля ввода или подавить события. Вы можете добавить свое собственное настраиваемое свойство к каждому объекту Autocomplete и затем прочитать это значение свойства позже.

Вот пример.

$(#yourInputTextBox).autocomplete({ 
    source: function(request, response) { 
     // Do something with request.term (what was keyed in by the user). 
     // It could be an AJAX call or some search from local data. 
     // To keep this part short, I will do some search from local data. 
     // Let's assume we get some results immediately, where 
     // results is an array containing objects with some id and name. 
     var results = yourSearchClass.search(request.term); 

     // Populate the array that will be passed to the response callback. 
     var autocompleteObjects = []; 
     for (var i = 0; i < results.length; i++) { 
      var object = { 
       // Used by jQuery Autocomplete to show 
       // autocomplete suggestions as well as 
       // the text in yourInputTextBox upon selection. 
       // Assign them to a value that you want the user to see. 
       value: results[i].name; 
       label: results[i].name; 

       // Put our own custom id here. 
       // If you want to, you can even put the result object. 
       id: results[i].id; 
      }; 

      autocompleteObjects.push(object); 
     } 

     // Invoke the response callback. 
     response(autocompleteObjects); 
    }, 
    select: function(event, ui) { 
     // Retrieve your id here and do something with it. 
     console.log(ui.item.id); 
    } 
}); 

documentation упоминает вы должны передать массив объектов с ярлыком и стоимостными свойствами. Однако вы можете передать объекты с еще, чем эти два свойства и прочитать их позже.

Вот соответствующая часть, о которой я говорю.

Array: массив может использоваться для локальных данных. Существуют два поддерживаемых формата : массив строк: ["Choice1", "Choice2"] Массив из объектов с меткой и значениями свойств: [{label: "Choice1", value: "value1"}, .. .] Свойство label отображается в меню предложений . Значение будет вставлено во входной элемент, когда пользователь выбирает элемент. Если указано только одно свойство, оно будет использоваться для обоих, например., если вы предоставляете только свойства значения, значение будет также использоваться в качестве метки.

Answer 7

Это можно сделать без использования скрытого поля. Вы должны использовать JQuerys возможность создавать пользовательские атрибуты во время выполнения.

('#selector').autocomplete({ 
    source: url, 
    select: function (event, ui) { 
     $("#txtAllowSearch").val(ui.item.label); // display the selected text 
     $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input 
    } 
}); 

$('#button').click(function() { 
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input 
}); 

Answer 8

В конце концов я сделал это Большое спасибо друзей, и особая благодарность г-ну https://stackoverflow.com/users/87015/salman-a из-за его коду я был в состоянии решить эту проблему должным образом. наконец, мой код выглядит так, как я использую заводной Grails я надеюсь, что это поможет кому-то там .. Большое спасибо

HTML код выглядит в моей GSP странице

<input id="populate-dropdown" name="nameofClient" type="text"> 
    <input id="wilhaveid" name="idofclient" type="text"> 

сценарий функции, как это моя страница GSP

<script> 
     $("#populate-dropdown").on('input', function() { 
      $.ajax({ 
       url:'autoCOmp', 
       data: {inputField: $("#populate-dropdown").val()}, 
       success: function(resp){ 
        $('#populate-dropdown').autocomplete({ 
         source:resp, 
         select: function (event, ui) { 
          $("#populate-dropdown").val(ui.item.label); 
          $("#wilhaveid").val(ui.item.value); 
          return false; 
         } 
        }) 
       } 
      }); 
     }); 
    </script> 

И мой код контроллера, как этот

def autoCOmp(){ 
    println(params) 
    def c = Client.createCriteria() 
    def results = c.list { 
     like("nameOfClient", params.inputField+"%") 
    } 

    def itemList = [] 
    results.each{ 
     itemList << [value:it.id,label:it.nameOfClient] 
    } 
    println(itemList) 
    render itemList as JSON 
} 

Еще одна вещь, я не задал поле id скрытым, потому что сначала я проверял, что получаю точный идентификатор, вы можете сохранить его скрытым, просто поместите type = hidden вместо текста для второго элемента ввода в html

Спасибо!

Answer 9

Я попытался отобразить код (значение или идентификатор) в текстовом поле с текстом метки. После этого я попытался event.preventDefault() это прекрасно работает ...

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}] 

$(".jquery-autocomplete").autocomplete({ 
    source: e,select: function(event, ui) { 
     event.preventDefault(); 
     $('.jquery-autocomplete').val(ui.item.label); 
     console.log(ui.item.label); 
     console.log(ui.item.value); 
    } 
}); 

Answer 10

Предполагая объекты в исходном массиве имеет свойство ID ...

var $local_source = [ 
    { id: 1, value: "c++" }, 
    { id: 2, value: "java" }, 
    { id: 3, value: "php" }, 
    { id: 4, value: "coldfusion" }, 
    { id: 5, value: "javascript" }, 
    { id: 6, value: "asp" }, 
    { id: 7, value: "ruby" }]; 

Получение удержания тока экземпляр и проверка его свойства selectedItem позволят вам получить свойства текущего выделенного элемента. В этом случае выдается предупреждение об идентификаторе выбранного элемента.

$('#button').click(function() { 
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id; 
});