4

私はhttp://jsfiddle.net/dhoerster/BXYpt/をjQuery UI オートコンプリートから値をベースとして使用しています。これは、OR 条件を使用できる必要があることを除いて、必要なことを正確に実行します。デモとしてフィドルを作成しました：

http://jsfiddle.net/B8bWX/1/

私の問題は次のとおりです。デモ項目は、車、電話、および電話付きの車です。オートコンプリートで 3 つのケースを処理する方法はありますか? したがって、「Car Phone」と入力すると、次のようになります。

1) 最初のケース - "Car Phone" はどのラベルの部分文字列でもないため、結果は 0 です。

2) 2 番目のケース - 「Car With Phone」に「Car」と「Phone」が表示されるため、結果は 1 です。これは、前の 0 件の結果の下のリストに追加されます。

3) 3 番目のケース - 「車」と「電話」というラベルに少なくとも 1 つの検索項目が含まれているため、さらに 2 つの結果が表示されます。これらの結果は、ステージ 1 と 2 の前の結果の下に表示されるため、下の選択ボックスがレンダリングされます。

電話付きの車

車

電話 (どちらも同じように正しいため、車と電話の順序は実際には関係ありません)

問題のJavaScriptは次のとおりです。

$(document).ready(function() {
$( "#topics" ).autocomplete({
    minLength: 1,
    source: topics,
    focus: function( event, ui ) {
        $( "#topics" ).val( ui.item.label );
        return false;
    },
    select: function( event, ui ) {
        $( "#topics" ).val( ui.item.label );
        $("#topicID").val(ui.item.id);
        $( "#results").text($("#topicID").val());    
        return false;
    }
 })

});

それで、それを順番に行うことは可能でしょうか：

1) string.contains (デフォルト)

2) 文字列分割 --> AND 条件

3) 文字列分割 --> OR 条件 (含まれる用語の数による並べ替えを優先しない)

4

1 に答える 1

2

私たちがしなければならないことは、"AND" と "OR" の結果を得るためにデータを独自に検索することです。私の最初の考えは、自動選択のresponseイベントを使用してこれを行い、結果をライブラリ自体によって収集されたものに追加することでした。しかし、それを書いているときに、結果が2回表示されるのを防ぐために、とにかく通常の検索を行う必要があることに気付きました. 代わりに、プロパティの関数を指定し、sourceすべての並べ替えを自分で行います。

(以前の方法を使用すると、jquery-ui のバグ (見つかった結果の数を示す新しいメッセージが表示されます) にも遭遇しましたが、これは新しいアプローチには当てはまりません。)

さて、ここからは非常に簡単なので、コードを示しましょう。

var topics = [
    {
    value: "carphone",
    label: "Car With Phone",
    id: "1"},
{
    value: "car",
    label: "Car",
    id: "2"},
{
    value: "phone",
    label: "Phone",
    id: "3"}
];

$(document).ready(function() {
    $("#topics").autocomplete({
        minLength: 1,
        focus: function(event, ui) {
            $("#topics").val(ui.item.label);
            return false;
        },
        select: function(event, ui) {
            $("#topics").val(ui.item.label);
            $("#topicID").val(ui.item.id);
            $("#results").text($("#topicID").val());
            return false;
        },
        source: function(request, response) {
            var fullResults = [];
            var andResults = [];
            var orResults = [];
            var fullNeedle = request.term;
            var needles = $.grep(fullNeedle.split(" "), function(element) {
                return element !== '';
            });

            $.each(topics, function(key, topic) {
                var found = 0;
                $.each(needles, function(needleKey, needle) {
                    if (topic.label.toLowerCase().indexOf(needle.toLowerCase()) != -1) {
                        found++;
                    }
                });

                if (topic.label.toLowerCase().indexOf(fullNeedle.toLowerCase()) != -1) {
                    fullResults.push(topic);
                }
                else if (found == needles.length) {
                    andResults.push(topic);
                }
                else if (found > 0) {
                    orResults.push(topic);
                }
            });

            $.merge(fullResults, andResults);
            $.merge(fullResults, orResults);
            response(fullResults);
        }
    });
});

簡単な説明: トピックをソースとしてライブラリに提供することはもうありませんが、代わりに、自分で検索するときにソースを保持しています。3 つの配列を使用してこれを行います。各配列には 3 種類の結果のいずれかが含まれるため、順序を正しく保つことができます。最後に、3 つの配列への入力が完了したら、それらをマージします。

于 2012-11-08T20:51:57.310 に答える