jQuery 자동 완성 UI 모든 방향 검색

Question

jQuery 자동 완성을 사용하여 약 2000 개의 레코드 목록에서 결과를 보여줍니다. 이 목록은 필자의 견해로는 오랫동안이 모든 레코드를 검색하기 위해 좋은 필터가 필요합니다.

레이블 필드뿐 아니라 값 필드에서도 검색 할 수 있도록 소스를 이미 수정했습니다. 지금 내가 원하는 것은 "삼성 갤럭시 S4"를 찾을 수있는 "S4 갤럭시"를 검색 할 수 있다는 것입니다. 표준 jquery 자동 완성은 왼쪽에서 오른쪽으로 만 검색 할 수 있으므로 "galaxy s4"는 발견되지만 "s4 galaxy"는 검색되지 않습니다. 나는 또한 "gal s4"를보고 "Samsung Galaxy S4"를 찾고 싶다. 지금

var completeResults = [{ 
    value: "S4 iv", 
    label: "Samsung Galaxy S4", 
    image: "samsung_galaxy_s_iv_1.jpg" 
}, { 
    value: "stackoverflow", 
    label: "Nokia lumia 920", 
    image: "nokia_lumia_920_1.jpg" 
}]; 

completeResults되어 경기가> "삼성 갤럭시 S4가"

전체 코드 내가 지금 아래 스탠드를 사용 굵게 만든 경우

은 추가, 그것은 좋은 것입니다 짧은 목록! Normaly 약 2000 기록.

function custom_source(request, response) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
    response($.grep(completeResults, function (value) { 
     return matcher.test(value.value) || matcher.test(value.label); 
    })); 
} 

$("#s").autocomplete({ 
    source: custom_source, 
    minLength: 0 
}).data("ui-autocomplete")._renderItem = function (ul, item) { 
    var inner_html = "<a><img src='../img/type/120x200/" + item.image + "' width='21' height='35'/><span class='title'>" + item.label + "</span></a>"; 

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

Answer 1

좋아요. 여기서는 작동해야하는 항목이 있습니다 (텍스트를 생략 함). 기본적으로 전략은 다음과 같습니다.

1. 사용자가 입력하는 각 용어에서 정규 표현식을 만듭니다. 입력을 ' '으로 나누면됩니다. 그 선택은 우리가
2. 1 단계에서 추출 된 모든 단일 정규식과 일치하는 경우 가능한 선택 목록에있는 모든 선택에 대한
3. 는 만 2 단계

function custom_source(request, response) { 
    // Create an array of regular expressions from the user's input: 
    var terms = $.map(request.term.split(' '), function (term) { 
     // Ignore just whitespace: 
     if ($.trim(term)) { 
      return new RegExp($.ui.autocomplete.escapeRegex(term), 'i'); 
     } 
    }); 

    response($.grep(completeResults, function (value) { 
     var found = true 
      , i 
      , regex; 

     // For every result, iterate over every term we extracted earlier and make sure it matches: 
     for (i = 0; i < terms.length && found; i++) { 
      regex = terms[i]; 
      found = found && (regex.test(value.value) || regex.test(value.label)); 
     } 

     return found; 
    })); 
} 

의 기준을 충족하는 값을 반환 참조

예 :http://jsfiddle.net/Aa5nK/73/

질문의 다른 부분은 다음과 같은 질문에 대한 답변 :

jQueryUI: how can I custom-format the Autocomplete plug-in results?