Добавьте возможности автозаливки к jQuery-UI 1.8.1
вот то, что я в настоящее время имею, к сожалению, я, может казаться, не выясняю, как добраться autoFill работать с jQuery-UI... Это раньше работало с прямым Autocomplete.js
Мой JSON в бэкэнде похож на это
[
{ "label": "Canada", "value": "Canada", "id": "1" },
{ "label": "United States", "value": "United States", "id": "2" },
]
Я использовал ответ здесь для получения работы mustMatch, но к сожалению если я "снабжаю вкладками" далеко от поля ввода или если я ввожу слово полностью вместо того, чтобы на самом деле выбрать предложенный текст, я добираюсь, "Ничто не выбрало" ответ вместо Значения и идентификатора.
Кто-либо знает, как извлечь идентификатор из автоматического заполнения, когда Вы на самом деле не выбираете поле?
В основном то, Что я ищу, является чем-то подобным Month (local): пример найден ЗДЕСЬ: http://jquery.bassistance.de/autocomplete/demo/
Но очевидно с помощью jQuery-UI вместо jquery.autocomplete.js
3 ответа
Автозаполнение устарело в версии автозаполнения JQuery UI, а плагин jquery.autocomplete больше не поддерживается.
Вот ссылка на решение на github. При этом будет автоматически выбран первый элемент в списке, если вы выйдете за пределы поля и для вашего вызова автозаполнения будет установлено значение «selectFirst: true».
(function( $ ) {
$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {
var autocomplete = $( this ).data( "autocomplete" ),
menu = autocomplete.menu;
if ( !autocomplete.options.selectFirst ) {
return;
}
menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
});
}( jQuery ));
DEMO: http://jsbin.com/akile3
UPDATED 2: с поддержкой TAB! ;)
DEMO: http://jsbin.com/akile3/8
попробуйте что-то вроде этого:
не уверен, что это то, что вы хотите, в любом случае это автозаполнение всего слова, если оно совпадает с чем-то!
$(function() {
var json_source = [
{ "label": "Canada", "value": "Canada", "id": "1" },
{ "label": "United States", "value": "United States", "id": "2" }];
$('<span id="hold"></span>').insertAfter('#regions');
var $text_was = $('#hold');
var $log = $('#log');
$("#regions").autocomplete({
minLength: 3,
source: json_source,
open: function(event, ui) {
var first_option = $('.ui-autocomplete li:eq(0) a').text();
$(this).text(first_option);
$text_was.text(first_option);
},
change: function(event, ui) {
var prev_text = $text_was.text() ? $text_was.text() : json_source[0].value ;
$log.empty();
var message = (prev_text != this.value) ?
'Nothing selected, input was ' + prev_text :
'Selected: ' + ui.item.value + ' aka ' + ui.item.id;
if (prev_text != this.value)
$(this).val( prev_text );
$log.append(message);
},
select: function(event, ui) {
$text_was.text(ui.item.value);
$(this).blur();
}
}).blur(function(){
if( this.value == '' )
$(this).autocomplete('search', json_source[0].value );
return false;
});
});
Если вам нужно просто автозаполнение, то вот код, который я использую.
$("#regions").autocomplete({
source: thesource
}).live('keydown', function (e) {
var keyCode = e.keyCode || e.which;
//if TAB or RETURN is pressed set the value of the textbox to the text of the first suggestion
if ((keyCode == 9 || keyCode == 13) && $(".ui-autocomplete").is(":visible")) {
$(this).val($(".ui-autocomplete li:visible:first").text());
}
});