JQuery自动完成validation选定的值
我们正在使用JörnZaefferer编写的autocomplete jquery插件，并且正在尝试validation是否输入了有效选项。
该插件具有result（）事件，该事件在进行选择时触发。 这没关系，但是当用户点击时我需要检查文本框中的值。 所以我们尝试了.change（）和.blur（）事件，但它们都会产生一个问题：当你点击结果div中的一个条目（’suggest’列表）时，.change（）和.blur（）事件触发，这是在插件向文本框写入值之前，因此此时无需validation。
有人可以帮我配置事件，所以每当有人点击，但不在结果框中我可以检查框中的有效值。 如果这是错误的方法，请通知我正确的方法。 我们最初使用此插件是因为它的’mustMatch’选项。 此选项似乎并不适用于所有情况。 很多时候，一个有效的条目将写入文本框，而不是被插件清除为无效，我无法确定原因。
基本代码示例：
Choose Favorite $(".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 });
我认为，不是编写自己的函数来validation数据是否匹配，而是可以调用search() 。 如果使用null data参数调用result() ，那么您知道没有使用自动完成，并且通过在blur上调用search() ，您可以保证至少调用一次result() 。
我已经发布了类似问题的代码，它也可能对此有所帮助。
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 });
更新：这应该工作。 我将名称列表加载到名为ListOfNames的数组中，这在onBlur（）事件中用于validation针对数据输入的名称。 你可能需要做一些调整，但我认为它应该做你想要的。
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; }
这是我过去使用过的代码。 非常干净简单。
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; } } });
我使用全局数据结构来跟踪找到的值
var ac_sent = {};
.result（）事件处理程序在.change（）事件处理程序之前调用，所以在.result（事件，数据，格式化）中我将数据添加到结构中：
ac_sent[ data ] = true;
然后在.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; });