jQuery UI Autosearch 여러 문자열 검색

Question

jQuery UI 자동 검색 기능에 일부 기능을 추가해야합니다. 내가 해결하고자하는 문제는 사용자가 용어 목록을 통해 검색하고 추천 단어를 검색하는 임의의 순서로 텍스트를 입력 할 수 있도록 허용하는 것입니다. 예를 들어, 나는 다음과 같은 조건이 있다고 가정

the brown cow jumped over the moon 
the blue cow watched in horror 
the red cow simply laughed 
the green cow got sick at such a sight 
the yellow cow lost 5 bucks to the black cow 
the black cow smiled at his fortune 

If the user types in "the cow", I would expect the autocomplete feature to list all the results. 
If I type in "brown moon", I would expect the first result to appear. 
If I type in "fortune smiled", the last result would appear. 

기본적으로이 동작은 순서에 상관없이 임의의 문자열을 입력하고 검색 결과를 얻을 수있는 사용자 수 있습니다.

다음은 내가 생각한 것입니다. "열기"또는 "검색"이벤트에 콜백 함수를 추가하고 거기에서 결과를 조작해야합니다. 지금까지 내 코드는 다음과 같습니다.

$(function() 
{ 
    var data = 
    [ 
     "the brown cow jumped over the moon", 
     "the blue cow watched in horror", 
     "the red cow simply laughed ", 
     "the green cow got sick at such a sight", 
     "the yellow cow lost 5 bucks to the black cow", 
     "the black cow smiled at his fortune" 
    ]; 

    $(".text-search").autocomplete(
    { 
     autoFocus: true, 
     source: data, 
     delay: 0, 
     minLength: 2, 
     open: function (e, ui) 
     { 
      debugger; 
      // what should i do here? 
     }, 
     search: function (e, ui) 
     { 
      debugger; 
      // what should i do here? 
     } 
    }); 
}); 

<div class="ui-widget"> 
    <label for="autocomplete">Autocomplete: </label> 
    <input class="text-search"> 
</div> 

Answer 1

사용자가 입력 한 텍스트를 기반으로 자신 만의 정규 표현식을 만듭니다.

$(".text-search").autocomplete({ 
    autoFocus: true, 
    source: function(request, response) { 
     var regexStr = "\\b(" + $.map($.trim(request.term).split(" "), function(term) { 
      return $.ui.autocomplete.escapeRegex($.trim(term)) 
     }).join("|") + ")\\b", 
     matcher = new RegExp(regexStr); 

     response($.grep(data, function(value) { 
      return matcher.test(value.label || value.value || value); 
     })); 
    }, 
    delay: 0, 
    minLength: 2 
}); 

정규 표현식의 조각 비밀 보이지만, 그것은 단지 교대 (|)를 사용하여 식을 생성 : 당신은 후보 목록의 각 항목을 테스트하기 위해이 정규 표현식을 사용할 수 있습니다. 예를 들어 을 입력하면 \b(brown|cow)\b이 생성되어 모든 문자열을 "갈색"또는 "암소"와 일치시킵니다.

예 :http://jsfiddle.net/hTfj9/