Bagaimana saya bisa memformat hasil plug-in Autocomplete?

Saya menggunakan plug-in Autocomplete UI jQuery . Apakah ada cara untuk menyorot urutan karakter pencarian dalam hasil drop-down?

Misalnya, jika saya memiliki "foo bar" sebagai data dan saya mengetik "foo" saya akan mendapatkan " foo bar" di drop-down, seperti ini:

Ya, Anda bisa jika Anda melengkapi-monyet secara otomatis.

Dalam widget pelengkapan otomatis yang disertakan dalam v1.8rc3 dari jQuery UI, sembulan saran dibuat di fungsi _renderMenu dari widget pelengkapan otomatis. Fungsi ini didefinisikan seperti ini:

_renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        self._renderItem( ul, item );
    });
},

Fungsi _renderItem didefinisikan seperti ini:

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
},

Jadi yang perlu Anda lakukan adalah mengganti _renderItem fn itu dengan kreasi Anda sendiri yang menghasilkan efek yang diinginkan. Teknik ini, mendefinisikan kembali fungsi internal di perpustakaan, yang kemudian saya pelajari disebut monyet-tambalan . Begini cara saya melakukannya:

  function monkeyPatchAutocomplete() {

      // don't really need this, but in case I did, I could store it and chain
      var oldFn = $.ui.autocomplete.prototype._renderItem;

      $.ui.autocomplete.prototype._renderItem = function( ul, item) {
          var re = new RegExp("^" + this.term) ;
          var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
                  this.term + 
                  "</span>");
          return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + t + "</a>" )
              .appendTo( ul );
      };
  }

Panggil fungsi itu sekali dalam $(document).ready(...).

Sekarang, ini adalah retasan, karena:

• ada keberatan regexp yang dibuat untuk setiap item yang diberikan dalam daftar. Keberatan regexp itu harus digunakan kembali untuk semua item.

• tidak ada kelas css yang digunakan untuk memformat bagian yang selesai. Ini gaya inline.
  Ini berarti jika Anda memiliki beberapa pelengkapan otomatis pada halaman yang sama, mereka semua akan mendapatkan perlakuan yang sama. Gaya css akan menyelesaikannya.

... tetapi ini menggambarkan teknik utama, dan itu berfungsi untuk kebutuhan dasar Anda.

contoh kerja yang diperbarui: http://output.jsbin.com/qixaxinuhe

Untuk mempertahankan case dari string yang cocok, sebagai ganti menggunakan case dari karakter yang diketik, gunakan baris ini:

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
          "$&" + 
          "</span>");

Dengan kata lain, mulai dari kode asli di atas, Anda hanya perlu mengganti this.termdengan "$&".

EDIT
Di atas mengubah setiap widget pelengkapan otomatis pada halaman. Jika Anda ingin mengubah hanya satu, lihat pertanyaan ini:
Bagaimana cara menambal * hanya satu * contoh Pelengkapan Otomatis pada halaman?

ini juga berfungsi:

       $.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };

kombinasi jawaban @ Jörn Zaefferer dan @ Cheeso.

Sangat membantu. Terima kasih. +1.

Berikut ini adalah versi ringan yang mengurutkan pada "String harus dimulai dengan istilah":

function hackAutocomplete(){

    $.extend($.ui.autocomplete, {
        filter: function(array, term){
            var matcher = new RegExp("^" + term, "i");

            return $.grep(array, function(value){
                return matcher.test(value.label || value.value || value);
            });
        }
    });
}

hackAutocomplete();

Ini dia, contoh lengkap fungsional:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Autocomplete - jQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <label for="search"></label>
  <input type="text" name="search" id="search" />
</form>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
};


var availableTags = [
    "JavaScript",
    "ActionScript",
    "C++",
    "Delphi",
    "Cobol",
    "Java",
    "Ruby",
    "Python",
    "Perl",
    "Groove",
    "Lisp",
    "Pascal",
    "Assembly",
    "Cliper",
];

$('#search').autocomplete({
    source: availableTags,
    minLength: 3
});


});
</script>
</body>
</html>

Semoga ini membantu

jQueryUI 1.9.0 mengubah cara kerja _renderItem.

Kode di bawah ini mempertimbangkan perubahan ini dan juga menunjukkan bagaimana saya melakukan pencocokan sorotan menggunakan plugin jQuery Autocomplete dari Jörn Zaefferer. Ini akan menyoroti semua istilah individual dalam keseluruhan istilah pencarian.

Sejak pindah ke menggunakan Knockout dan jqAuto saya menemukan ini cara yang lebih mudah untuk menata hasil.

function monkeyPatchAutocomplete() {
   $.ui.autocomplete.prototype._renderItem = function (ul, item) {

      // Escape any regex syntax inside this.term
      var cleanTerm = this.term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

      // Build pipe separated string of terms to highlight
      var keywords = $.trim(cleanTerm).replace('  ', ' ').split(' ').join('|');

      // Get the new label text to use with matched terms wrapped
      // in a span tag with a class to do the highlighting
      var re = new RegExp("(" + keywords + ")", "gi");
      var output = item.label.replace(re,  
         '<span class="ui-menu-item-highlight">$1</span>');

      return $("<li>")
         .append($("<a>").html(output))
         .appendTo(ul);
   };
};

$(function () {
   monkeyPatchAutocomplete();
});

untuk cara yang lebih mudah, coba ini:

$('ul: li: a[class=ui-corner-all]').each (function (){      
 //grab each text value 
 var text1 = $(this).text();     
 //grab user input from the search box
 var val = $('#s').val()
     //convert 
 re = new RegExp(val, "ig") 
 //match with the converted value
 matchNew = text1.match(re);
 //Find the reg expression, replace it with blue coloring/
 text = text1.replace(matchNew, ("<span style='font-weight:bold;color:green;'>")  + matchNew +    ("</span>"));

    $(this).html(text)
});
  }

Inilah pengulangan solusi Ted de Koning. Itu termasuk :

• Pencarian case sensitif
• Menemukan banyak kemunculan string yang dicari

$.ui.autocomplete.prototype._renderItem = function (ul, item) {

    var sNeedle     = item.label;
    var iTermLength = this.term.length; 
    var tStrPos     = new Array();      //Positions of this.term in string
    var iPointer    = 0;
    var sOutput     = '';

    //Change style here
    var sPrefix     = '<strong style="color:#3399FF">';
    var sSuffix     = '</strong>';

    //Find all occurences positions
    tTemp = item.label.toLowerCase().split(this.term.toLowerCase());
    var CharCount = 0;
    tTemp[-1] = '';
    for(i=0;i<tTemp.length;i++){
        CharCount += tTemp[i-1].length;
        tStrPos[i] = CharCount + (i * iTermLength) + tTemp[i].length
    }

    //Apply style
    i=0;
    if(tStrPos.length > 0){
        while(iPointer < sNeedle.length){
            if(i<=tStrPos.length){
                //Needle
                if(iPointer == tStrPos[i]){
                    sOutput += sPrefix + sNeedle.substring(iPointer, iPointer + iTermLength) + sSuffix;
                    iPointer += iTermLength;
                    i++;
                }
                else{
                    sOutput += sNeedle.substring(iPointer, tStrPos[i]);
                    iPointer = tStrPos[i];
                }
            }
        }
    }


    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + sOutput + "</a>")
        .appendTo(ul);
};

Ini adalah versi yang tidak memerlukan ekspresi reguler dan cocok dengan banyak hasil dalam label.

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
            var highlighted = item.label.split(this.term).join('<strong>' + this.term +  '</strong>');
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + highlighted + "</a>")
                .appendTo(ul);
};

Lihatlah demo combobox, itu termasuk menyoroti hasil: http://jqueryui.com/demos/autocomplete/#combobox

Regex yang digunakan di sana juga berkaitan dengan hasil html.

Ini versi saya:

• Menggunakan fungsi DOM alih-alih RegEx untuk memecah string / menyuntikkan tag rentang
• Hanya pelengkapan otomatis yang ditentukan yang terpengaruh, tidak semua
• Bekerja dengan UI versi 1.9.x

function highlightText(text, $node) {
    var searchText = $.trim(text).toLowerCase(),
        currentNode = $node.get(0).firstChild,
        matchIndex,
        newTextNode,
        newSpanNode;
    while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
        newTextNode = currentNode.splitText(matchIndex);
        currentNode = newTextNode.splitText(searchText.length);
        newSpanNode = document.createElement("span");
        newSpanNode.className = "highlight";
        currentNode.parentNode.insertBefore(newSpanNode, currentNode);
        newSpanNode.appendChild(newTextNode);
    }
}
$("#autocomplete").autocomplete({
    source: data
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    var $a = $("<a></a>").text(item.label);
    highlightText(this.term, $a);
    return $("<li></li>").append($a).appendTo(ul);
};

Sorot contoh teks yang cocok

Anda dapat menggunakan kode berikut:

Lib:

$.widget("custom.highlightedautocomplete", $.ui.autocomplete, {
    _renderItem: function (ul, item) {
        var $li = $.ui.autocomplete.prototype._renderItem.call(this,ul,item);
        //any manipulation with li
        return $li;
    }
});

dan logika:

$('selector').highlightedautocomplete({...});

itu menciptakan widget khusus yang dapat menggantikan _renderItemtanpa menimpa _renderItemprototipe plugin asli.

dalam contoh saya juga menggunakan fungsi render asli untuk menyederhanakan kode

itu penting jika Anda ingin menggunakan plugin di tempat yang berbeda dengan tampilan autocomplete yang berbeda dan tidak ingin merusak kode Anda.

Jika Anda menggunakan plugin pihak ke-3, itu memiliki opsi sorot: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

(lihat tab Opsi)

Untuk mendukung banyak nilai, cukup tambahkan fungsi berikut:

function getLastTerm( term ) {
  return split( term ).pop();
}

var t = String(item.value).replace(new RegExp(getLastTerm(this.term), "gi"), "<span class='ui-state-highlight'>$&</span>");