JQueryオートコンプリートは選択された値を確認します

Jörn Zaeffererによって書かれたオートコンプリートjqueryプラグインを使用しており、有効なオプションが入力されたことを確認しようとしています。JQueryオートコンプリートは選択された値を確認します

プラグインには、選択時に発生するresult（）イベントがあります。これはOKですが、ユーザーがクリックしたときにテキストボックスの値を確認する必要があります。したがって、.change（）と.blur（）イベントを試しましたが、両方とも問題があります。結果のdiv（ 'suggest'リスト）のエントリをクリックすると、.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 –

ビクターによってここに最良の答えを見つけましたまともな解決策。私は次回この機能が必要な時にそれを試さなければならないでしょう。 – Brettski

参照してください：http://stackoverflow.com/questions/1267149/how-to-detect-when-user-ignores-jquery-autocomplete-suggestions –

UPDATE：これは動作するはずです。 ListOfNamesという名前のArrayに名前のリストをロードしています。これはonBlur（）イベントで使用され、データに対して入力された名前を確認します。いくつか微調整をする必要があるかもしれませんが、探しているものをやるべきだと思います。むしろ、データが一致するかどうかを確認するために、独自の関数を書くよりも、あなただけのsearch()を呼び出すことができます

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

ありがとうございました。これはそれほどのことではありません。私が値を選択すると、正しくクリックされます。それをクリックするとエラーは無効になります。私はdbのチェックを広告する必要がありますが、私はいくつかの文字を入力し、離れてクリックしてもエラーは発生しません。 – Brettski

最初に実行されるのは、.blur（）または.change（）ですか。 – Brettski

お返事ありがとうございました。 fetchnames.aspから返される可能性のある名前は32,000ですが、配列にすべてのデータを保存するかどうかはわかりません。私はアプローチが好きです – Brettski

は、私は思います。 result()がnullのdataパラメータで呼び出された場合、オートコンプリートが使用されておらず、ぼかしでsearch()を呼び出すと、少なくとも1回はresult()が呼び出されることが保証されます。

私はこのコードをa similar questionのために投稿しましたが、ここでも役立ちます。私は.result

var ac_sent = {};

を発見された値を追跡するためにグローバルなデータ構造を使用し

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

良い答え！結果のイベントが2回発生するのを防ぐ方法を知っていますか？このイベントが、ajaxリクエストを介してサーバー上の入力を検証するなど、複雑なロジックを実行する場合、これが問題です。 – Kamarey

'.result（）'でたくさんの処理をしているなら、あなたの 'if（data）'ブランチが既に呼び出されているかどうかを確認するフラグを維持しようとすることができます。しかし、これは簡単ではないと警告できます：あなたは 'if（data）'の最後にフラグを簡単に設定できますが、ユーザが自動完成提案を編集する場合にはクリアする必要があります。私はそのために '.change（）'を使ってみようと思います。がんばろう！ – npdoty

におけるので（）イベントハンドラは、.change（）イベントハンドラの前に呼び出されます。結果Iは、構造にデータを追加（イベント、データは、フォーマットされた）：私はac_sentのアイテム[データ]が存在するかどうかを確認.change（イベント）イベントハンドラに次に

ac_sent[ data ] = true;

、及び場合何もない、私はそれを知っている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

change（）イベントの前にトリガされるresult（）イベントは100％正確ではありません。 Enterキーを使用してリストから項目を選択すると、その順番で実行されます。ただし、マウスを使用すると、イベントの順序が逆になります。change（）が最初に実行され、続いてresult（）が実行されます。 – Jason

これは過去に使用したコードです。非常にきれいでシンプル。

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

最もクリーンなソリューションです。 'val'がデータソースに合わせて大文字に変換されていることを確認してください。そうでなければ、一致しません。例えば。 'actionscript'は' ActionScript'と同じではありません。 – Optimae

JQueryオートコンプリートは選択された値を確認します

答えて

関連する問題