4

可能かどうかはわかりませんが、jquery-ui オートコンプリートが同じ結果に対して複数のキーワードで動作するようにしたいと思います。

これは例ですが、かなり古いもので、古いjqueryファイルを使用しても機能しないようです。jquery と javascript にはあまり詳しくありませんが、既存のものを編集することはできます。

これは私が現在持っているものです（マルチキーワードの調整なし）：

    <script type="text/javascript">
    $(document).ready(function() {
        NewAuto();
    });

    function NewAuto() {
        var products = [
        <?php foreach($search__1 as $search) {
        echo "{value: '". $search['product_name'] ."'}, ";}?>
        ];
        $("#keyword").autocomplete({
            source: function(requestObj, responseFunc) {
                var matchArry = products.slice(); // Copy the array
                var srchTerms = $.trim(requestObj.term).split(/\s+/);
                // For each search term, remove non-matches.
                $.each(srchTerms, function(J, term) {
                    var regX = new RegExp(term, "i");
                    matchArry = $.map(matchArry, function(item) {
                        return regX.test(item) ? item : null;
                    });
                });
                // Return the match results.
                responseFunc(matchArry);
            },
            open: function(event, ui) {
                // This function provides no hooks to the results list, so we have to trust the selector, for now.
                var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
                var srchTerm = $.trim($("#keyword").val()).split(/\s+/).join('|');
                // Loop through the results list and highlight the terms.
                resultsList.each(function() {
                    var jThis = $(this);
                    var regX = new RegExp('(' + srchTerm + ')', "ig");
                    var oldTxt = jThis.text();
                    jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
                });
            }
        });
    }

</script>
4

2 に答える 2

3

あなたの質問を正しく理解していれば、同じ文の複数の単語に一致するリストを表示したいと考えています。

例えば ここをクリック_

 <html>
 <head>
    <title>Testing</title>
    <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .srchHilite { background: yellow; }
    </style>
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            NewAuto();
        });

        function NewAuto() {
            var availableTags = ["win the day", "win the heart of", "win the heart of someone"];
            alert(availableTags);  // alert = win the day,win the heart of,win the heart of someone
            $("#tags").autocomplete({
                source: function(requestObj, responseFunc) {
                    var matchArry = availableTags.slice(); // Copy the array
                    var srchTerms = $.trim(requestObj.term).split(/\s+/);
                    // For each search term, remove non-matches.
                    $.each(srchTerms, function(J, term) {
                        var regX = new RegExp(term, "i");
                        matchArry = $.map(matchArry, function(item) {
                            return regX.test(item) ? item : null;
                        });
                    });
                    // Return the match results.
                    responseFunc(matchArry);
                },
                open: function(event, ui) {
                    // This function provides no hooks to the results list, so we have to trust the selector, for now.
                    var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
                    var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|');
                    // Loop through the results list and highlight the terms.
                    resultsList.each(function() {
                        var jThis = $(this);
                        var regX = new RegExp('(' + srchTerm + ')', "ig");
                        var oldTxt = jThis.text();
                        jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
                    });
                }
            });
        }

    </script>
</head>
<body>
    <div>
        <label for="tags">
            Multi-word search:
        </label>
        <input type="text" id="tags" />
    </div>
</body>
</html>
于 2013-05-15T11:54:52.617 に答える