19

私は、ユーザー入力に基づいて構築されたスクリプトを作成中です。

データベースから値を取得する必要があるフィールドがいくつかありますが、

エントリが見つからない場合は、次のユーザーがオートコンプリートで見つけられるように、新しい値を追加します。

TokenInputと呼ばれるこの見栄えが良く実装が簡単なjqueryプラグインを見つけましたが、そうではないようです

データベースクエリで使用できないエントリを受け入れます。

プラグインのリンクは次のとおりです：http：//loopj.com/jquery-tokeninput/demo.html

これに対する回避策はありますか？または、すでにこの機能を備えている別のプラグインを提案しますか？

そして、私はこの種のWebサイトのセキュリティの側面について少し心配していますが、この種の実装を行うときに注意する必要がある特別なことがありますか？

4

8 に答える 8

17

これは、allowFreeTaggingオプションを使用して、このプラグインの最新のマスターで処理されるようになりました：https ://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js#L57

バージョン番号とドキュメントは2年間更新されていないため、masterを使用する必要があります。

于 2013-03-28T16:01:17.270 に答える
13

フィールドでtokenInputを有効にすると、

$(selector).tokenInput(url, ...

そのURLは、tokenInputが検索クエリを送信する場所です。これは、検索クエリに一致するデータベースエントリに基づいて提案を返すスクリプトを指します。必要なのは、データベース内に検索クエリに一致するものがない場合に、そのスクリプトでリストに別の提案を追加することです。これを行う方法は、スクリプトに大きく依存します。

質問に。のタグを付けたのでphp、URLは提案でいっぱいのJSONオブジェクトを返すphpスクリプトを指していると思います。その場合は、phpスクリプトを変更して、リストに新しい提案を追加します。

"{id: " . $idForThisNewSuggestion . ", name: \"" . $searchQueryString . " (new suggestion)\"}"
于 2011-11-19T20:12:53.723 に答える
10

これがローカルjsonでの私の解決策です

$("#input").tokenInput(yourjsondata,{
    preventDuplicates: false,
    onResult: function (item) {
        if($.isEmptyObject(item)){
              return [{id:'0',name: $("tester").text()}]
        }else{
              return item
        }

    },
});

id：0のすべてが新しいエントリです

于 2013-03-03T16:39:02.287 に答える
2

Shawnの答えに追加するには（つまり、データベースに新しいアイテムとして実際に追加するためにサーバー側が必要です）、この変更を行って、JavaScript側での追加を許可できる場合があります。

于 2011-11-20T08:16:38.893 に答える
1

また、onBlur関数を変更して、検索ボックスをクリックした場合に最初の項目を選択するようにしました。これは、ユーザーにとってより直感的です。

.blur(function () {
        $(this).val("");
        if ($(".token-input-selected-dropdown-item").length>0)
            add_token($(".token-input-selected-dropdown-item").data("tokeninput"));
        hide_dropdown();
    })
于 2012-02-22T09:59:59.633 に答える
1 
 $(document).ready(function() {
            $("#expert").tokenInput("source.php", {
                theme: "facebook",
                noResultsText:'Skill Not Found - Enter to Add',
                queryParam:'q',
                onResult: function (item) {
                                            if($.isEmptyObject(item)){
                                                  return [{id:$("#token-input-expert").val(),name: $("#token-input-expert").val()+'*'}]
                                            }else{
                                                  return item
                                            }
                },
                preventDuplicates:true<?php if($expert_rank_json){?>,
                prePopulate: <?php echo $expert_rank_json ?>
                <?php } ?>
            });
于 2014-04-14T21:20:06.210 に答える
0

.phpファイルでは、while条件の前に、次を使用できます。

array_push($yourarray, array('id'=> 0 ,'name'=> $_GET["term"]));
于 2013-03-06T11:34:41.413 に答える
0

結果があってもドロップダウンの上部に値を表示したかったので、SteveRの回答にいくつかの機能を追加しました。また、選択したアイテムがデータベースに存在しない場合は、onAddを追加します。

 $("#my_input").tokenInput(my_results_route), {
    hintText: "Select labels",
    noResultsText: "No results",
    searchingText: "Searching...",
    preventDuplicates: true,
    onResult: function(item) {
        if($.isEmptyObject(item)){
            return [{id:'0', name: $("tester").text()}];   
        } else {
            //add the item at the top of the dropdown
            item.unshift({id:'0', name: $("tester").text()});
            return item; 
        }
    },
    onAdd: function(item) {
        //add the new label into the database
        if(!parseInt(item.id)) {
            //database insertion ajax call
            console.log('Add to database');
        }
    }
});
于 2013-11-14T11:11:12.497 に答える