web-dev-qa-db-ja.com

jQueryオートコンプリートは選択した値を検証します

JörnZaefferer によって作成されたオートコンプリートjQueryプラグインを使用しており、有効なオプションが入力されていることを確認しようとしています。

プラグインには、選択が行われたときに発生するresult（）イベントがあります。これは問題ありませんが、ユーザーがクリックしたときにテキストボックスの値を確認する必要があります。そのため、.change（）イベントと.blur（）イベントを試しましたが、どちらも問題が発生します。結果div（「提案」リスト）のエントリをクリックすると、.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>
jqueryautocompleteevent-handling
22
Brettski

データが一致するかどうかを確認する独自の関数を作成するのではなく、search()を呼び出すだけでよいと思います。 result()がnullのdataパラメータで呼び出された場合、オートコンプリートが使用されなかったことがわかります。ぼかしでsearch()を呼び出すことにより、次のことが保証されます。少なくとも1回は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
});
9
npdoty

PDATE：これは機能するはずです。名前のリストを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;
}
4
Jose Basilio

これは私が過去に使用したコードです。とても清潔でシンプルです。

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

見つかった値を追跡するためにグローバルデータ構造を使用します

var ac_sent = {};

.result（）イベントハンドラーは.change（）イベントハンドラーの前に呼び出されるため、.result（event、data、formatted）でデータを構造体に追加します。

ac_sent[ data ] = true;

次に、.change（event）イベントハンドラーで、ac_sent [data]にアイテムがあるかどうかを確認します。アイテムがない場合は、Wordが見つからなかったことがわかります。

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