12

こんにちは、jQuery UI オートコンプリート ウィジェットを機能させて、配列の複数の属性 (デフォルトで行うものだけでなく)から一致を検索できるようにしようとしています。

私は彼らの例をいじりましたが、これを解決する方法はまだわかりません.

http://jsfiddle.net/FUZPN/

これが私の配列形式ですscript

var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        other: "9834275 9847598023 753425828975340 82974598823"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        other: "98 83475 9358 949078 8 40287089754 345 2345"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        other: "49857 2389442 573489057 89024375 928037890"
    }

私が求めているのは、「write」と入力すると、最初の要素がオートコンプリートでポップアップすることです。同様に、「jq」と入力すると、最初の 2 つの要素がポップアップするはずです。

ドキュメントによると：

配列: 配列はローカル データに使用できます。次の 2 つの形式がサポートされています。

  • 文字列の配列:[ "Choice1", "Choice2" ]

  • label プロパティと value プロパティを持つオブジェクトの配列:[ { label: "Choice1", value: "value1" }, ... ]

labelプロパティが提案メニューに表示されます。ユーザーが項目を選択すると、値が入力要素に挿入されます。プロパティを 1 つだけ指定すると、両方に使用されます。たとえば、値プロパティのみを指定すると、その値はlabelとしても使用されます。

ソースが 1 つのラベルではなく2 つのラベル(labelおよびdesc?) を使用するように (ハード) コードするにはどうすればよいですか?

（申し訳ありませんが、同様の質問を多数検索しましたが、それらはすべて複数のソースを対象としています。配列が1つしかないため、ここにはありません..そうですか？）

4

1 に答える 1

12

オートコンプリートはsource の 3 番目のタイプである関数を受け入れ、任意の方法でデータを提供できます。

3 番目のバリエーションであるコールバックは、最も柔軟性が高く、任意のデータ ソースをオートコンプリートに接続するために使用できます。コールバックは 2 つの引数を取得します。

  • テキスト入力の現在の値を参照する単一の term プロパティを持つリクエスト オブジェクト。たとえば、ユーザーが都市フィールドに「new yo」と入力すると、オートコンプリートの用語は「new yo」になります。
  • 単一の引数、つまりユーザーに提案するデータを期待する応答コールバック。このデータは、提供された用語に基づいてフィルタリングする必要があり、上記の単純なローカル データの形式のいずれかにすることができます。リクエスト中のエラーを処理するカスタム ソース コールバックを提供する場合に重要です。エラーが発生した場合でも、常に応答コールバックを呼び出す必要があります。これにより、ウィジェットが常に正しい状態になることが保証されます。

これは、このようなものを書くことができることを意味します

$( "#project" ).autocomplete({
    source: function (request, response) {
        // request.term is what you typed
        console.log(request.term); 

        //call response with an array containing the filtered data
        response([...]); 
    }
});

あなたの問題に対する簡単な解決策：

function lightwell(request, response) {
    function hasMatch(s) {
        return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
    }
    var i, l, obj, matches = [];

    if (request.term==="") {
        response([]);
        return;
    }

    for  (i = 0, l = projects.length; i<l; i++) {
        obj = projects[i];
        if (hasMatch(obj.label) || hasMatch(obj.desc)) {
            matches.push(obj);
        }
    }
    response(matches);
}

$( "#project").autocomplete({
    source: lightwell
});

そしてフィドルhttp://jsfiddle.net/FUZPN/5/

于 2013-04-06T10:21:50.523 に答える