Question

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

该插件具有result（）事件，该事件在进行选择时触发。这没关系，但是当用户点击时我需要检查文本框中的值。所以我们尝试了.change（）和.blur（）事件，但它们都存在问题：当你点击结果div中的一个条目（'suggest'列表）时，.change（）和.blur（）事件触发，这是在插件向文本框写入值之前，因此此时无需验证。

有人可以帮助我配置事件，以便每当有人点击时，但不在结果框中，我可以在框中检查有效值。如果这是错误的方法，请通知我正确的方法。我们最初使用此插件是因为它的'mustMatch'选项。此选项似乎并不适用于所有情况。很多时候，有效的条目会写入文本框，然后被插件清除为无效，我无法确定原因。

基本代码示例：

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

Answer 1

我认为不是编写自己的函数来验证数据是否匹配，而是可以调用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
});

Answer 2

更新：这应该有效。我正在将名称列表加载到名为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;
}

Answer 3

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

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

Answer 4

我使用全局数据结构来跟踪找到的值

var ac_sent = {};

<。>在.change（）事件处理程序之前调用.result（）事件处理程序，因此在.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;
});

jQuery自动完成验证选定的值

4 个答案: