Как реализовать “mustMatch” и “selectFirst” в jQuery Автоматическое заполнение UI?
Я недавно переместил несколько своих плагинов Автоматического заполнения от того, произведенного bassistance для автоматического заполнения UI jQuery.
Как "mustMatch" и "selectFirst" могут быть реализованы только с обратными вызовами и другими опциями, не изменяя сам базовый код автоматического заполнения?
4 ответа
Думаю, я решил обе функции ...
Чтобы упростить задачу, я использовал обычный настраиваемый селектор:
$.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());
}
});
});
Если какие-либо из ваших предложений автозаполнения содержат какие-либо «специальные» символы, используемые регулярным выражением, вы должны экранировать эти символы в пределах 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, работающее с этим кодом ... хотя нужно тщательно протестировать:
<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; }
Я делаю это немного по-другому, кэшируя результаты и очищая текстовое поле, если количество результатов для определенного термина равно нулю:
<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>