我最近将一些自动完成插件从bassistance生成的插件迁移到jQuery UI autocomplete。
如何在不修改核心自动完成代码本身的情况下，仅使用回调和其他选项实现“mustMatch”和“selectFirst”？
答案 0 :(得分：40)
我想我已经解决了这两个问题...
为了简化操作，我使用了一个常见的自定义选择器：
$.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]) + "$");
};
答案 1 :(得分：32)
对于mustMatch，我使用了一些简单的东西，它可以工作。我希望它有所帮助。
change: function (event, ui) {
if (!ui.item) {
$(this).val('');
}
}
答案 2 :(得分：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>
答案 3 :(得分：2)
我发现这个问题很有用。
我以为我会发布我正在使用的代码（改编自Esteban Feldman's answer）。
我已经添加了自己的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; }
答案 4 :(得分：1)
我用来实现'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>
答案 5 :(得分：1)
我发现了一个问题。当建议列表处于活动状态时，即使该值与建议不符，您也可以提交表单。为了解除这个，我补充道：
$('form').submit(function() {
if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
$(this).val('');
$("span").text("Select a valid city").show();
return false;
}
});
这可以防止提交表单并显示消息。
答案 6 :(得分：1)
这个JQuery-UI官方演示有mustMatch，以及其他很酷的东西：http://jqueryui.com/demos/autocomplete/#combobox
我已更新它以添加自动填充功能以及其他一些功能。
使用Javascript：
/* stolen from http://jqueryui.com/demos/autocomplete/#combobox
*
* and these options added.
*
* - autoFill (default: true): select first value rather than clearing if there's 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
答案 7 :(得分：1)
也许只是因为这是一个老问题，但我发现插件中已经存在最简单的解决方案，您只需要使用适当的函数来访问它。
此代码将处理自动完成失去焦点且无效值的情况：
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变量（如果您选择清空该字段，则根本不需要该值）。
答案 8 :(得分：0)
我的做法有所不同，如果特定术语的结果数为零，则缓存结果并清除文本字段：
<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>
答案 9 :(得分：0)
Scott Gonzalez为jQueryUI AutoComplete编写了selectFirst extension（以及其他几个）。
答案 10 :(得分：0)
根据接受的答案：
我的其他要求：多个自动填充，不显眼的错误验证。
change: function () {
var target = $(this),
widget = target.autocomplete('widget'),
cond = widget.find('li:textEquals("' + target.val() + '")').length === 0;
target.toggleClass('input-validation-error', cond);
}
答案 11 :(得分：0)
迟到的回复但可能对某人有帮助！
考虑自动完成小部件中的两个事件
1）更改 - 当字段模糊且值更改时触发。
2）响应 - 在搜索完成并显示菜单时触发。
修改更改和响应事件，如下所示：
change : function(event,ui)
{
if(!ui.item){
$("selector").val("");
}
},
response : function(event,ui){
if(ui.content.length==0){
$("selector").val("");
}
}
希望这有帮助！
答案 12 :(得分：0)
以下是“ mustMatch”要求的简单确定解决方案：
<script type="text/javascript">
$(function() {
$("#my_input_id").autocomplete({
source: '/get_my_data/',
minChars: 3,
select: function(event, ui) {
// custom code
$(this).data("pre-ui-autocomplete-value", $(this).val());
}
}).on("focus", function () {
$(this).data("pre-ui-autocomplete-value", $(this).val());
}).on("blur", function () {
$(this).val($(this).data("pre-ui-autocomplete-value"));
});
});
</script>