jQuery 自动完成验证选定的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/797969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Autocomplete verify selected value
提问by Brettski
We are using the autocomplete jQuery plugin written by J?rn Zaefferer, and are trying to verify a valid option is entered.
我们正在使用J?rn Zaefferer编写的自动完成 jQuery 插件，并尝试验证输入的有效选项。
The plugin has result() event which fires when a selection is made. This is OK, but I need to check the value in the textbox when a user clicks out too. So we have tried a .change() and .blur() events, but they both pose an issue: when you click on an entry in the results div (the 'suggest' list) the .change() and .blur() events fire, and this is before the plugin has written a value to the textbox, so there is nothing to verify at this point.
该插件具有 result() 事件，在进行选择时会触发该事件。这没问题，但我也需要在用户点击时检查文本框中的值。因此，我们尝试了 .change() 和 .blur() 事件，但它们都带来了一个问题：当您单击结果 div（“建议”列表）中的条目时，.change() 和 .blur()事件触发，这是在插件将值写入文本框之前，因此此时无需验证。
Could someone help me configure events so whenever someone clicks away, but not in the results box I can check for a valid value in the box. If this is the wrong approach please inform me of the correct one. We originally went with this plugin because of its 'mustMatch' option. This option doesn't seem to work in all cases. Many times a valid entry will be written into the textbox and then cleared by the plugin as invalid, I have not been able to determine why.
有人可以帮我配置事件，所以每当有人点击离开时，但不在结果框中，我可以检查框中的有效值。如果这是错误的方法，请告诉我正确的方法。我们最初使用这个插件是因为它的“mustMatch”选项。此选项似乎并不适用于所有情况。很多时候，一个有效的条目会被写入文本框，然后被插件清除为无效，我无法确定原因。
Basic Code example:
基本代码示例：
<html>
<head>
<title>Choose Favorite</title>
<script language="JavaScript" src="jquery-1.3.2.min.js" ></script>
<script language="JavaScript" src="jquery.autocomplete.min.js" ></script>
<script>
$(".suggest").autocomplete("fetchNames.asp", {
matchContains:false,
minChars:1,
autoFill:false,
mustMatch:false,
cacheLength:20,
max:20
});
$(".suggest").result(function(event, data, formatted) {
var u = this;
// Check value here
});
/* OR */
$(".suggest").change(function(me) {
//check value here
});
</script>
</head>
<body>
<label for="tbxName">Select name (I show 10):</label><br />
<INPUT type="text" id="tbxName" name="tbxName" class="suggest"><br />
</body>
</html>
回答by npdoty
I think rather than writing your own function to verify if the data matches, you can just call search(). If result()is called with a null dataparameter, then you know that auto-complete wasn't used and by calling search()on blur, you're guaranteed to get result()called at least once.
我认为与其编写自己的函数来验证数据是否匹配，不如直接调用search(). 如果result()使用空data参数调用，则您知道未使用自动完成功能，并且通过调用search()模糊，您可以保证result()至少被调用一次。
I've posted this code for a similar question, it may help here as well.
我已经为一个类似的问题发布了这段代码，它也可能在这里有所帮助。
autocompleteField.result(function(event, data, formatted) {
if (data) {
//auto-complete matched
//NB: this might get called twice, but that's okay
}
else {
//must have been triggered by search() below
//there was no match
}
});
autocompleteField.blur(function(){
autocompleteField.search(); //trigger result() on blur, even if autocomplete wasn't used
});
回答by Jose Basilio
UPDATE:This should work. I am loading the list of names into an Array called ListOfNames, this is used in the onBlur() event to verify the name entered against the data. You may need to do some tweaks, but I think it should do what you're looking for.
更新：这应该有效。我正在将名称列表加载到一个名为 ListOfNames 的数组中，这在 onBlur() 事件中用于验证针对数据输入的名称。您可能需要进行一些调整，但我认为它应该可以满足您的要求。
var listOfNames = [];
$(document).ready(function(){
$.get("fetchNames.asp", function(data){
listOfNames = data.split("\r\n");
});
$(".suggest").autocomplete("fetchNames.asp", {
matchContains:false,
minChars:1,
autoFill:false,
mustMatch:false,
cacheLength:20,
max:20
});
$("#tbxName").blur(function(){
if(!listOfNames.containsCaseInsensitive(this.value)){
alert("Invalid name entered");
}
});
});
Array.prototype.containsCaseInsensitive = function(obj) {
var i = this.length;
while (i--) {
if (this[i].toUpperCase() === obj.toUpperCase()) {
return true;
}
}
return false;
}
回答by JoBaxter
This is the code I have used in the past. Very clean and simple.
这是我过去使用的代码。非常干净和简单。
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#currentSelectedLevel" ).autocomplete({
source: availableTags,
change: function( event, ui ) {
val = $(this).val();
exists = $.inArray(val,availableTags);
if (exists<0) {
$(this).val("");
return false;
}
}
});
回答by Jay
I use a global data structure to keep track of the values that were found
我使用全局数据结构来跟踪找到的值
var ac_sent = {};
the .result() event handler is called before the .change() event handler, so in .result( event, data, formatted ) I add the data to the structure:
.result() 事件处理程序在 .change() 事件处理程序之前调用，因此在 .result( event, data, formatted ) 中我将数据添加到结构中：
ac_sent[ data ] = true;
then in the .change( event ) event handler I check to see if there is an item at ac_sent[ data ], and if there isn't any, I know that the word was not found:
然后在 .change( event ) 事件处理程序中，我检查 ac_sent[ data ] 处是否有一个项目，如果没有，我知道找不到这个词：
$( "#textbox" ).change( function( event ) {
var data = event.target.value;
if ( !ac_sent[ data ] ) {
// result was not found in autocomplete, do something...
ac_sent[ data ] = true; // remember that we processed it
}
return false;
});
