كيف يمكنني تخصيص التنسيق التلقائي المكونات التلقائية؟

Question

أنا أستخدم jquery ui التلقائي المكون الإضافي. وبعد هل هناك طريقة لتسليط الضوء على تسلفي تسلفي شخصيات البحث في النتائج المنسدلة؟

على سبيل المثال، إذا كان لدي "Foo Bar" كبيانات واكتب "Foo" سأحصل عليها "فور شريط "في المنسدلة، مثل هذا:

Answer 1

نعم، يمكنك إذا كنت قرد التصحيح الإكمال التلقائي.

في أداة تعريف AutoComplete المضمنة في V1.8RC3 من JQUERY UI، يتم إنشاء المنبثقة من الاقتراحات في الوظيفة _RENDERMENU من أداة الإكمال التلقائي. يتم تعريف هذه الوظيفة مثل هذا:

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

يتم تعريف وظيفة _RenderItem مثل هذا:

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

إذن ما عليك القيام به هو استبدال هذا _RenderITEM FN مع خلقك الخاص الذي ينتج التأثير المرغوب فيه. هذه التقنية، إعادة تعريف وظيفة داخلية في مكتبة، لقد وصلت إلى التعلم القرد الترقيع. وبعد إليك كيف فعلت ذلك:

  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 );
      };
  }

استدعاء هذه الوظيفة مرة واحدة في $(document).ready(...) .

الآن، هذا اختراق، لأن:

• هناك regexp obj تم إنشاؤها لكل عنصر يتم تقديمه في القائمة. يجب إعادة استخدام RegexP OBJ لجميع العناصر.

• لا يوجد فئة CSS المستخدمة لتنسيق الجزء المكتمل. إنه نمط مضمون.
  هذا يعني أنه إذا كان لديك أجهزة إظهار تلقائية متعددة على نفس الصفحة، فسوف يحصلون جميعا على نفس العلاج. سيكون نمط CSS أن يحل ذلك.

... لكنه يوضح التقنية الرئيسية، ويعمل لمتطلباتك الأساسية.

تحديث مثال العمل: http://output.jsbin.com/qixaxinuhe.

---

للحفاظ على حالة سلاسل المباراة، بدلا من استخدام حالة الأحرف المكتوبة، استخدم هذا السطر:

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

بمعنى آخر، بدءا من التعليمات البرمجية الأصلية أعلاه، تحتاج فقط إلى استبدال this.term مع "$&".

---

تعديل
التغييرات أعلاه كل الإكمال التلقائي القطعة على الصفحة. إذا كنت ترغب في تغيير واحد فقط، راجع هذا السؤال:
كيفية التصحيح * مثيل واحد فقط من الإكمال التلقائي على الصفحة؟

Answer 2

هذا يعمل أيضا:

       $.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);
        };

مزيج من @ Jörn Zaefferer و @ ردود تشيزو.

Answer 3

فائقة مفيدة. شكرا لك. +1.

فيما يلي نسخة خفيفة من نوع "السلسلة" يجب أن تبدأ المصطلح ":

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();

Answer 4

JQueryui 1.9.0 التغييرات كيف يعمل _RenderItem.

يأخذ الكود أدناه هذا التغيير في الاعتبار ويوضح أيضا كيف كنت أقوم بتسلط الضوء على مطابقة باستخدام برنامج Jörn Zaefferer's JQuery AutoComplete الإضافي. سوف يسلط الضوء على جميع المصطلحات الفردية في مصطلح البحث الشامل.

منذ الانتقال إلى استخدام القاضية وجوقو وجدت هذه طريقة أسهل بكثير لتصميم النتائج.

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();
});

Answer 5

هنا يذهب، مثال وظيفي كامل:

<!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>

أتمنى أن يساعدك هذا

Answer 6

للحصول على طريقة أسهل، جرب هذا:

$('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)
});
  }

Answer 7

إليك rehash من محلول Ted de Koning. ويشمل :

• حالة حساسة للحالة
• العثور على العديد من تكرارات السلسلة البحث

$.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);
};

Answer 8

فيما يلي نسخة لا تتطلب أي تعبيرات منتظمة وتتوافق مع نتائج متعددة في الملصق.

$.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);
};

Answer 9

إلقاء نظرة على تجريبي Combobox، ويشمل النتيجة تسليط الضوء على: http://jueryui.com/demos/autocomplete/#combobox.

Regex قيد الاستخدام هناك أيضا صفقات مع نتائج HTML.

Answer 10

هنا هو بلدي الخاص بي:

• يستخدم وظائف DOM بدلا من Regex لكسر سلاسل / ضخ تمتد
• تتأثر الإكمال التلقائي المحدد فقط، وليس كل شيء
• يعمل مع الإصدار UI 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);
};

تسليط الضوء على مثال النص المتطابق

Answer 11

يمكنك استخدام الرمز المرجل:

ليب:

$.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;
    }
});

والمنطق:

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

يخلق القطعة المخصصة التي يمكن أن تتجاوز _renderItem دون الكتابة _renderItem من النموذج المساعد الأصلي الأصلي.

في المثال الخاص بي يستخدم أيضا وظيفة Render الأصلية إلى بعض التعليمات البرمجية

إنه أمر مهم إذا كنت ترغب في استخدام البرنامج المساعد في أماكن مختلفة مع عرض مختلف للإكمال التلقائي ولا ترغب في كسر الرمز الخاص بك.

Answer 12

إذا كنت تستخدم بدلا من ذلك، فإن البرنامج المساعد للحزب الثالث، فهذا لديه خيار تمييز:http://docs.jquery.com/plugins/autoComplete/AutoCompleIte#URL_OR_DATAOPTONS.

(راجع علامة التبويب "خيارات")

Answer 13

لدعم قيم متعددة، ما عليك سوى إضافة الوظيفة التالية:

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>");