Недавно я перенес несколько моих плагинов Autocomplete из bassistance в автозаполнение jQuery UI.
Как можно выполнить "mustMatch" и "selectFirst" с помощью только обратных вызовов и других параметров без изменения самого кода автозаполнения ядра?
Недавно я перенес несколько моих плагинов Autocomplete из bassistance в автозаполнение jQuery UI.
Как можно выполнить "mustMatch" и "selectFirst" с помощью только обратных вызовов и других параметров без изменения самого кода автозаполнения ядра?
Думаю, я решил обе функции...
Чтобы упростить задачу, я использовал общий настраиваемый селектор:
$.expr[':'].textEquals = function (a, i, m) {
return $(a).text().match("^" + m[3] + "$");
};
Остальная часть кода:
$(function () {
$("#tags").autocomplete({
source: '/get_my_data/',
change: function (event, ui) {
//if the value of the textbox does not match a suggestion, clear its value
if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
$(this).val('');
}
}
}).live('keydown', function (e) {
var keyCode = e.keyCode || e.which;
//if TAB or RETURN is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion
if((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {
$(this).val($(".ui-autocomplete li:visible:first").text());
}
});
});
Если какой-либо из ваших предложений автозаполнения содержит любые специальные символы, используемые regexp, вы должны избежать этих символов в m [3] в пользовательском селекторе:
function escape_regexp(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
и измените пользовательский селектор:
$.expr[':'].textEquals = function (a, i, m) {
return $(a).text().match("^" + escape_regexp(m[3]) + "$");
};
Я использовал что-то столь же простое, как это для mustMatch, и он работает. Надеюсь, это поможет кому-то.
change: function (event, ui) {
if (!ui.item) {
$(this).val('');
}
}
Я думаю, что у меня есть mustMatch, работающий с этим кодом... нужно пройти через тест:
<script type="text/javascript">
$(function() {
$("#my_input_id").autocomplete({
source: '/get_my_data/',
minChars: 3,
change: function(event, ui) {
// provide must match checking if what is in the input
// is in the list of results. HACK!
var source = $(this).val();
var found = $('.ui-autocomplete li').text().search(source);
console.debug('found:' + found);
if(found < 0) {
$(this).val('');
}
}
});
});
</script>
Я нашел этот вопрос полезным.
Мне показалось, что я выложу код, который я сейчас использую (адаптированный из ответ Эстебана Фельдмана).
Я добавил свой собственный параметр mustMatch и класс CSS, чтобы выделить проблему до сброса значения текстового поля.
change: function (event, ui) {
if (options.mustMatch) {
var found = $('.ui-autocomplete li').text().search($(this).val());
if (found < 0) {
$(this).addClass('ui-autocomplete-nomatch').val('');
$(this).delay(1500).removeClass('ui-autocomplete-nomatch', 500);
}
}
}
CSS
.ui-autocomplete-nomatch { background: white url('../Images/AutocompleteError.gif') right center no-repeat; }
Решение, которое я использовал для реализации "mustMatch":
<script type="text/javascript">
...
$('#recipient_name').autocomplete({
source: friends,
change: function (event, ui) {
if ($('#message_recipient_id').attr('rel') != $(this).val()) {
$(this).val('');
$('#message_recipient_id').val('');
$('#message_recipient_id').attr('rel', '');
}
},
select: function(event, ui) {
$('#message_recipient_id').val(ui.item.user_id);
$('#message_recipient_id').attr('rel', ui.item.label);
}
});
...
</script>
Я обнаружил один вопрос. Пока список предложений активен, вы можете отправить свою форму, даже если значение не соответствует предложению. Чтобы не разрешить это, я добавил:
$('form').submit(function() {
if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
$(this).val('');
$("span").text("Select a valid city").show();
return false;
}
});
Это предотвращает отправку формы и отображает сообщение.
В этой официальной демонстрации JQuery-UI есть mustMatch, среди других интересных вещей: http://jqueryui.com/demos/autocomplete/#combobox
Я обновил его, чтобы добавить autoFill, и несколько других вещей.
JavaScript:
/* stolen from http://jqueryui.com/demos/autocomplete/#combobox * * and these options added. * * - autoFill (default: true): select first value rather than clearing if there a match * * - clearButton (default: true): add a "clear" button * * - adjustWidth (default: true): if true, will set the autocomplete width the same as * the old select. (requires jQuery 1.4.4 to work on IE8) * * - uiStyle (default: false): if true, will add classes so that the autocomplete input * takes a jQuery-UI style */ (function( $ ) { $.widget( "ui.combobox", { options: { autoFill: true, clearButton: true, adjustWidth: true, uiStyle: false, selected: null, }, _create: function() { var self = this, select = this.element.hide(), selected = select.children( ":selected" ), value = selected.val() ? selected.text() : "", found = false; var input = this.input = $( "" ) .attr('title', '' + select.attr("title") + '') .insertAfter( select ) .val( value ) .autocomplete({ delay: 0, minLength: 0, source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); var resp = select.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text.replace( new RegExp( "(?![^&;]+;)(?!]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^]*>)(?![^&;]+;)", "gi" ), "$1" ), value: text, option: this }; }); found = resp.length > 0; response( resp ); }, select: function( event, ui ) { ui.item.option.selected = true; self._trigger( "selected", event, { item: ui.item.option }); }, change: function( event, ui ) { if ( !ui.item ) { var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ), valid = false; select.children( "option" ).each(function() { if ( $( this ).text().match( matcher ) ) { this.selected = valid = true; return false; } }); if ( !valid || input.data("autocomplete").term=="" ) { // set to first suggestion, unless blank or autoFill is turned off var suggestion; if(!self.options.autoFill || input.data("autocomplete").term=="") found=false; if(found) { suggestion = jQuery(input.data("autocomplete").widget()).find("li:first")[0]; var option = select.find("option[text="+suggestion.innerText+"]").attr('selected', true); $(this).val(suggestion.innerText); input.data("autocomplete").term = suggestion.innerText; self._trigger( "selected", event, { item: option[0] }); } else { suggestion={innerText: ''}; select.find("option:selected").removeAttr("selected"); $(this).val(''); input.data( "autocomplete" ).term = ''; self._trigger( "selected", event, { item: null }); } return found; } } } }); if( self.options.adjustWidth ) { input.width(select.width()); } if( self.options.uiStyle ) { input.addClass( "ui-widget ui-widget-content ui-corner-left" ); } input.data( "autocomplete" )._renderItem = function( ul, item ) { return $( "" ) .data( "item.autocomplete", item ) .append( "" + item.label + "" ) .appendTo( ul ); }; this.button = $( " " ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .insertAfter( input ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "ui-corner-right ui-button-icon" ) .click(function() { // close if already visible if ( input.autocomplete( "widget" ).is( ":visible" ) ) { input.autocomplete( "close" ); return; } // work around a bug (likely same cause as #5265) $( this ).blur(); // pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); input.focus(); }); if( self.options.clearButton ) { this.clear_button = $( " " ) .attr( "tabIndex", -1 ) .attr( "title", "Clear Entry" ) .insertAfter( input ) .button({ icons: { primary: "ui-icon-close" }, text: false }) .removeClass( "ui-corner-all" ) .click(function(event, ui) { select.find("option:selected").removeAttr("selected"); input.val( "" ); input.data( "autocomplete" ).term = ""; self._trigger( "selected", event, { item: null }); // work around a bug (likely same cause as #5265) $( this ).blur(); }); } }, destroy: function() { this.input.remove(); this.button.remove(); this.element.show(); $.Widget.prototype.destroy.call( this ); } }); })( jQuery );
CSS (.hjq-combobox - это оболочка)
.hjq-combobox .ui-button { margin-left: -1px; } .hjq-combobox .ui-button-icon-only .ui-button-text { padding: 0; } .hjq-combobox button.ui-button-icon-only { width: 20px; } .hjq-combobox .ui-autocomplete-input { margin-right: 0; } .hjq-combobox {white-space: nowrap;}
Примечание: этот код обновляется и поддерживается здесь: https://github.com/tablatom/hobo/blob/master/hobo_jquery_ui/vendor/assets/javascripts/combobox.js
Возможно, это только потому, что это старая проблема, но я обнаружил, что самое легкое решение уже присутствует в плагине, вам просто нужно использовать соответствующие функции для доступа к нему.
Этот код будет обрабатывать случаи, когда автозаполнение теряет фокус с недопустимым значением:
change: function(e, ui) {
if (!ui.item) {
$(this).val("");
}
}
И этот код, так же как и исходная функциональность от bassistance, будет обрабатывать случаи, когда совпадений нет при наборе автозаполнения:
response: function(e, ui) {
if (ui.content.length == 0) {
$(this).val("");
}
}
Это хорошо работает либо с источником статического массива, либо с источником данных JSON. В сочетании с опцией autoFocus: true
он, кажется, делает все, что необходимо эффективным образом.
Последний случай, который вы можете обработать, - это то, что нужно делать, когда нажата клавиша ESCAPE с недопустимым значением в текстовом поле. Я использую значение первого совпадающего результата. И вот как я это делаю...
Сначала объявите переменную, чтобы сохранить наилучшее соответствие. Сделайте это за пределами своего плагина автозаполнения.
var bestMatch = "";
Затем используйте следующую опцию:
open: function(e, ui) {
bestMatch = "";
var acData = $(this).data('uiAutocomplete');
acData.menu.element.find("A").each(function () {
var me = $(this);
if (me.parent().index() == 0) {
bestMatch = me.text();
}
});
}
Наконец, добавьте следующее событие к вашему автозаполнению:
.on("keydown", function(e) {
if (e.keyCode == 27) // ESCAPE key
{
$(this).val(bestMatch);
}
})
Вы можете так же легко заставить поле быть пустым при нажатии клавиши эвакуации. Все, что вам нужно сделать, это установить значение в пустую строку при нажатии клавиши вместо переменной bestMatch
(которая не нужна вообще, если вы решили очистить поле).
Я делаю это немного иначе, кэшируя результаты и очищая текстовое поле, если количество результатов для определенного термина равно нулю:
<script type='text/javascript'>
function init_autocomplete( args )
{
var resultCache = {};
var currentRequestTerm = null;
var closeCallback = function()
{
// Clear text field if current request has no results
if( resultCache[currentRequestTerm].length == 0 )
$(args.selector).val('');
};
var sourceCallback = function( request, responseCallback )
{
// Save request term
currentRequestTerm = request.term;
// Check for cache hit
// ...
// If no cache hit, fetch remote data
$.post(
dataSourceUrl,
{ ... }, // post data
function( response )
{
// Store cache
resultCache[request.term] = response;
responseCallback( response );
}
};
$(args.selector).autocomplete({
close: closeCallback,
source: sourceCallback
});
}
</script>
Основываясь на принятом ответе:
Мои дополнительные требования: множественные автозаполнения, ненавязчивая проверка ошибок.
change: function () {
var target = $(this),
widget = target.autocomplete('widget'),
cond = widget.find('li:textEquals("' + target.val() + '")').length === 0;
target.toggleClass('input-validation-error', cond);
}
Поздний ответ, но может помочь кому-то!
Учитывая два события в виджетах автозаполнения
1) изменение - срабатывает, когда поле размыто и значение изменяется.
2) response - срабатывает, когда поиск завершается, и отображается меню.
Измените события изменения и ответа следующим образом:
change : function(event,ui)
{
if(!ui.item){
$("selector").val("");
}
},
response : function(event,ui){
if(ui.content.length==0){
$("selector").val("");
}
}
Надеюсь, это поможет!