JQuery自动完成验证选定的值

我们正在使用由Jörn Zaefferer编写的自动完成jquery插件，并试图验证是否输入了有效的选项。JQuery自动完成验证选定的值

该插件具有result（）事件，该事件在进行选择时触发。这没问题，但我也需要在用户点击时检查文本框中的值。因此，我们尝试了一个.change（）和.blur（）事件，但它们都提出了一个问题：当您在结果div（'建议'列表）中单击一个条目时，.change（）和.blur（）事件触发，这是在插件向文本框写入值之前，所以在这一点上没有任何可验证的内容。

有人可以帮助我配置事件，所以无论何时有人点击了，但没有在结果框中，我可以检查框中的有效值。如果这是错误的方法，请告诉我正确的一个。我们原先使用这个插件是因为它的'mustMatch'选项。这个选项似乎并不适用于所有情况。很多时候，一个有效的条目将被写入文本框，并被插件清除为无效，但我无法确定原因。

Basic代码示例：

<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>

来源

2009-04-28 Brettski

我找到了最好的答案在这里维克多 http://stackoverflow.com/questions/4952094/jquery-ui-autocomplete-only-allow-selected-valued-from-suggested-list – 2011-11-03 21:13:18

也就是说体面的解决方案。我将不得不在下次需要此功能时尝试。 – Brettski 2011-11-03 21:31:45

请参阅：http://stackoverflow.com/questions/1267149/how-to-detect-when-user-ignores-jquery-autocomplete-suggestions – 2012-03-08 14:07:56

UPDATE：这应该工作。我将名称列表加载到一个名为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; 
}

来源

2009-04-28 16:29:52

谢谢您的回复。这不是很好。如果我选择一个值，它会正确填写，一旦我点击它错误，无效。如果我输入几个字符，然后单击，没有错误，但我确实需要广告我的数据库检查。 – Brettski 2009-04-28 16:49:34

什么首先被解雇，.blur（）或.change（）？ – Brettski 2009-04-28 16:50:56

我想，而不是写自己的函数，以验证数据匹配，你可以叫search()。如果调用result()参数为空data，那么您知道未使用自动完成功能，并通过调用search()模糊处理，保证至少调用result()一次。

我已经发布了这个代码a similar question，它可能也有帮助。

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 
});

来源

2009-10-16 07:55:57 npdoty

我使用一个全局数据结构，保持被发现

var ac_sent = {};

的。结果（）事件处理程序的.change（）事件处理程序之前被称为价值的轨道，所以英寸结果（事件，数据格式化）我的数据添加到结构：

ac_sent[ data ] = true;

然后在.change（事件）的事件处理程序予检查以查看是否有在ac_sent [数据]中的项目，并且如果没有任何，我知道那个窝rd找不到：

$("#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; 
});

来源

2010-01-29 01:42:07 Jay

这是我过去使用的代码。非常干净和简单。

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; 
     } 
     } 
});

来源

2016-04-11 18:07:50 JoBaxter

JQuery自动完成验证选定的值

回答

相关问题