2

トークナイザー:

http://loopj.com/jquery-tokeninput/

ユーザーが入力に集中すると、「検索語を入力してください」というヒントが表示されます。jQuery UI のオートコンプリートでこれを行うことは可能ですか? http://jqueryui.com/demos/autocomplete/

私は自分のデータにリモート ソースを使用していますが、検索が開始されるまで、長さ 1 の一時的なソース (["Type in search term", ""]) をオートコンプリートに割り当てようと考えています。

4

2 に答える 2

0

ここでしなければならないことは、source引数を更新して、AJAX リクエストを自分で作成できるようにすることです。AJAXリクエストが戻ってくるのを待っている間、ウィジェットに「読み込み中」アイテムを渡します（質問で提案したように）：

$("#auto").autocomplete({
    source: function (request, response) {
        // Populate the list with temporary loading item:
        response([loadingItem]);

        $.ajax({
            url: "my_remote_source",
            data: request
        }).success(response).error(function () {
            response([]);
        });
    },
    select: function (event, ui) {
        if (ui.item.loading) {
            event.preventDefault();
        }
    },
    focus: function (event, ui) {
        if (ui.item.loading) {
            event.preventDefault();
        }
    }
});

selectおよびfocusイベント ハンドラーは、「読み込み中」の項目がクリックまたはフォーカスされるのを防ぐために存在します。残念ながら、読み込み中の項目をクリックすると消えてしまいますが、これは大したことであれば簡単に修正できます。

例: http://jsfiddle.net/andrewwhitaker/WP29E/1/

于 2012-09-03T14:13:58.120 に答える
0

これはあなたが探しているものですか: Update demo http://jsfiddle.net/vWJdT/ *older => * Working demo http://jsfiddle.net/MQfEL/

あなたが探しているのはこれだと思います：http://loopj.com/jquery-tokeninput/

それがあなたの原因に合うことを願っています:)

脚本

  <script type='text/javascript' src="https://raw.github.com/loopj/jquery-tokeninput/master/src/jquery.tokeninput.js"></script>



  <link rel="stylesheet" type="text/css" href="http://loopj.com/jquery-tokeninput/styles/token-input.css">




  <link rel="stylesheet" type="text/css" href="http://loopj.com/jquery-tokeninput/styles/token-input-facebook.css">

コード

  $(document).ready(function() {
            $("#demo-input-local-custom-formatters").tokenInput([{
                "first_name": "Tats_innit",
                "last_name": "Godfrey",
                "email": "Tats_innit@mit.whatwhatwuthulk.edu",
                "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
            },
            {
                "first_name": "Andre",
                "last_name": "Jackson",
                "email": "andre.jackson@yahoo.com",
                "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
            },
            {
                "first_name": "Andre",
                "last_name": "Jolly",
                "email": "andre.jolly@uol.com.br",
                "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
            },
            {
                "first_name": "Andre",
                "last_name": "Henderson",
                "email": "andre.henderson@globo.com",
                "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
            }
          ], {
              propertyToSearch: "first_name",
              resultsFormatter: function(item){ return "<li>" + "<img src='" + item.url + "' title='" + item.first_name + " " + item.last_name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.first_name + " " + item.last_name + "</div><div class='email'>" + item.email + "</div></div></li>" },
              tokenFormatter: function(item) { return "<li><p>" + item.first_name + " <b style='color: red'>" + item.last_name + "</b></p></li>" },
          });
        });​

作業イメージ

ちなみに私はゴッドフリーではありません。

ここに画像の説明を入力

ここにコードを入力してください

于 2012-09-02T23:28:03.167 に答える