0

複数の一致を強調表示する方法を示す例をいくつか見つけました。たとえば、「アートデザイン」と入力した場合、「アートとデザインの学位」として強調表示したいと思います。

次の例（静的配列を使用している場合でも）は、私が求めているものです：http: //jsfiddle.net/Q4jy9/1/

ただし、これをリモートphpデータソースで機能させる方法がわかりません。以下は私が使用している現在のコードです。キーを押すたびに用語が私のphpに送信され、データベースから一致するものが選択されます。

以下のスクリプトを変更して複数の単語/一致を強調表示できるようにする方法、または上記のリンクのスクリプトを変更して外部データソースで機能する方法はありますか？

var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
$("#f input").autocomplete({
   source: "livesearch.php",
   open: function(e, ui) {
      var origKeyword = $("#f input").val();
      var acData = $(this).data('autocomplete');
      acData.menu.element.find('a').each(function() {
         var me = $(this);
         var regex = new RegExp(acData.term, "gi");
         me.html(me.text().replace(regex, function(matched) {
            return termTemplate.replace('%s', matched);
         }));
      });

   },
   select: function(event, ui) {
      var keyword = $("#f input").val();
      $("#f input").val('');
      window.location.href = 'MYURLHERE?VARIABLE=' + ui.item.value;
      return false;
   },
   focus: function(event, ui) {
      return false;
   }
});
4

2 に答える 2

1

次のようなものを試してください（マッチング関数はjsfiddleからコピー＆ペーストされます）：

$("#f input").autocomplete({
    source: function(request, response) {
        $.getJSON("livesearch.php", request, function(data, status, xhr ) {

            var matchArry   = availableTags.slice ();
            var srchTerms   = $.trim (requestObj.term).split (/\s+/);

            $.each (srchTerms, function (J, term) {
                var regX  = new RegExp (term, "i");
                matchArry = $.map (matchArry, function (item) {
                    return regX.test (item)  ?  item  : null;
                });
            });

            response(matchArray);
        });
    },

    ...

});

これはjqueryUIサンプルに基づいています：http：//jqueryui.com/demos/autocomplete/#remote-with-cache

于 2012-09-07T15:31:33.087 に答える
0

tborychowskiの助けを借りて、私たちは実用的な解決策を持っていると思います:)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

<style type='text/css'>
   .srchHilite {background-color: yellow;}
</style>

<script type='text/javascript'>
$(document).ready(function(){

var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
$("#tags").autocomplete({
 source: function(request, response) {
        $.getJSON("livesearch.php", request, function(data, status, xhr ) {

            var newmatchArry = new Array();
            var matchArry   = data.slice ();
            var srchTerms   = $.trim (request.term).split (/\s+/);

                //--- For each search term, remove non-matches.
                $.each (srchTerms, function (J, term) {
                    var regX    = new RegExp (term.value, "i");
                    matchArry   = $.map (matchArry, function (item) {
                        return regX.test (item)  ?  item  : null;
                    } );
                } );

            response(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>
<input id="tags">

</div>
</body>

</html>
于 2012-09-11T12:32:37.627 に答える