복붙노트

[JQUERY] 어떻게 자동 완성 플러그인 결과를 맞춤 형식을 지정할 수 있습니다?

JQUERY

어떻게 자동 완성 플러그인 결과를 맞춤 형식을 지정할 수 있습니다?

해결법

  1. 1.

    예, 만약 당신이 원숭이 패치 자동 완성 할 수 있습니다.

    위젯 jQuery를 UI의 v1.8rc3에 포함 된 자동 완성에서, 제안의 팝업 자동 완성 위젯의 _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 );
      };
  }

    그 함수를 호출 .ready에서 $ (문서)를 한 번 (...).

    자,이 해킹이 있기 때문이다 :

    ...하지만 주요 기술을 설명하고, 그것은 당신의 기본 요구 사항에 적용됩니다.

    업데이트 작업 예 : http://output.jsbin.com/qixaxinuhe

    입력 된 문자의 케이스를 사용하는 것이 아니라 경기 문자열의 경우를 보존하기 위해이 줄을 사용 :

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

    즉, 위의 원본 코드에서 시작, 당신은 단지 "$ &"로 this.term를 교체해야합니다.

    편집하다 위는 페이지의 모든 자동 완성 위젯을 변경합니다. 당신이 하나를 변경하려는 경우,이 질문을 참조하십시오 어떻게 한 페이지에 * 자동 완성의 한 * 인스턴스를 패치하려면?

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

    요른 Zaefferer @ 및 Cheeso의 답변 @의 조합.

  3. 3.슈퍼 도움. 감사합니다. +1.

    슈퍼 도움. 감사합니다. +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();

  4. 4.여기에는, 기능 전체 예제를 간다 :

    여기에는, 기능 전체 예제를 간다 :

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

    도움이 되었기를 바랍니다

  5. 5._renderItem의 작동 방식을 jQueryUI 1.9.0 변경됩니다.

    _renderItem의 작동 방식을 jQueryUI 1.9.0 변경됩니다.

    아래 코드는 또한 내가 요른 Zaefferer의 jQuery를 자동 완성 플러그인을 사용하여 하이라이트 매칭을하고 있던 방법을 보여줍니다 고려 사항으로이 변화를 받아. 그것은 전체 검색어의 모든 개별 용어를 강조합니다.

    사용하여 이동하기 때문에 개편, 처리 및 jqAuto 나는이 결과를 스타일링 훨씬 쉬운 방법 발견했다.

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

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

  7. 7.여기 테드 드 코닝의 솔루션의 재탕이다. 그것이 포함됩니다 :

    여기 테드 드 코닝의 솔루션의 재탕이다. 그것이 포함됩니다 :

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

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

  9. 9.콤보 데모를 살펴 보자, 그것은 결과 강조 표시가 포함 http://jqueryui.com/demos/autocomplete/#combobox

    콤보 데모를 살펴 보자, 그것은 결과 강조 표시가 포함 http://jqueryui.com/demos/autocomplete/#combobox

    이 사용중인 정규식은 HTML 결과를 다루고있다.

  10. 10.여기 내 버전입니다 :

    여기 내 버전입니다 :

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

    일치하는 텍스트의 예를 강조

  11. 11.당신은 다음과 같은 코드를 사용할 수 있습니다 :

    당신은 다음과 같은 코드를 사용할 수 있습니다 :

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

    논리 :

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

    그것은 사용자가 원래 플러그인 프로토 타입의 _renderItem을 덮어 쓰지 않고 _renderItem을 무시할 수 있습니다 위젯을 만듭니다.

    내 예를도 사용 원래는 약간 단순화 코드 기능을 렌더링

    당신은 자동 완성의 다른보기와 다른 장소에서 플러그인 사용하려는 코드를 중단하지 않으려면이 중요한 것입니다.

  12. 12.대신 타사 플러그인을 사용하는 경우, 그것은 하이라이트 옵션이 있습니다 : http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

    대신 타사 플러그인을 사용하는 경우, 그것은 하이라이트 옵션이 있습니다 : http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

    (옵션 탭 참조)

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

    14. from https://stackoverflow.com/questions/2435964/how-can-i-custom-format-the-autocomplete-plug-in-results by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 보다 큼 /보다 적게보다는위한 스위치 문  (0) 2020.10.07
[JQUERY] '.ready $ (문서) ()'의 비 jQuery를 상응하는 무엇입니까?  (0) 2020.10.07
[JQUERY] fn.toggle (핸들러 (eventObject)가, 핸들러 (은 EventObject)는 ...) 어디 갔다?  (0) 2020.10.07
[JQUERY] 어떻게 JSP / 서블릿과 Ajax를 사용하여 서버에 파일을 업로드하려면?  (0) 2020.10.07
[JQUERY] 어떻게 JQuery와 작업 체인입니까?  (0) 2020.10.07
,

티스토리툴바