[JQUERY] jQuery를 UI 자동 완성 검색 구성을 위젯

jQuery를 UI 자동 완성 검색 구성을 위젯

해결법

1. ---

   1.jQuery를 UI의 v1.8rc3, 상기 자동 완성 위젯 스트링, 어레이, 또는 콜백 함수가 될 수있는 소스의 선택을 받아 들인다. 이 문자열의 경우, 자동 완성 옵션 / 제안을 얻기 위해 해당 URL에 GET을 수행합니다. 배열 경우, 자동 완성은 배열의 측면에서 어떤 위치에 입력 한 문자의 존재를 지적으로, 검색을 수행합니다. 콜백 함수를 - 마지막 변종은 당신이 원하는 것입니다.

   jQuery를 UI의 v1.8rc3, 상기 자동 완성 위젯 스트링, 어레이, 또는 콜백 함수가 될 수있는 소스의 선택을 받아 들인다. 이 문자열의 경우, 자동 완성 옵션 / 제안을 얻기 위해 해당 URL에 GET을 수행합니다. 배열 경우, 자동 완성은 배열의 측면에서 어떤 위치에 입력 한 문자의 존재를 지적으로, 검색을 수행합니다. 콜백 함수를 - 마지막 변종은 당신이 원하는 것입니다.

   자동 완성 문서에서 :

   예제 코드 :

   var wordlist= [ "about", "above", "across", "after", "against",
                   "along", "among", "around", "at", "before", 
                   "behind", "below", "beneath", "beside", "between", 
                   "beyond", "but", "by", "despite", "down", "during", 
                   "except", "for", "from", "in", "inside", "into", 
                   "like", "near", "of", "off", "on", "onto", "out", 
                   "outside", "over", "past", "since", "through", 
                   "throughout", "till", "to", "toward", "under", 
                   "underneath", "until", "up", "upon", "with", 
                   "within", "without"] ; 
   
   $("#input1").autocomplete({
       // The source option can be an array of terms.  In this case, if
       // the typed characters appear in any position in a term, then the
       // term is included in the autocomplete list.
       // The source option can also be a function that performs the search,
       // and calls a response function with the matched entries.
       source: function(req, responseFn) {
           var re = $.ui.autocomplete.escapeRegex(req.term);
           var matcher = new RegExp( "^" + re, "i" );
           var a = $.grep( wordlist, function(item,index){
               return matcher.test(item);
           });
           responseFn( a );
       }
   });
   

   몇 가지 핵심 포인트 :

   작업 데모 : http://jsbin.com/ezifi

   그것은 어떻게 생겼는지 :

   그냥 참고 :이 시점에서 매우 미숙으로 자동 완성에 대한 문서를 찾을 수 있습니다. 나는 이런 짓을 예를 찾을 수 없습니다, 나는 .CSS 파일이 필요하거나 .CSS 어떤 클래스 것은 사용되는 된 작업 문서를 찾을 수 없습니다. 나는 코드를 검사에서이 모든 것을 배웠습니다.

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

2. ---

   2.intaradusiinga의 jasabinakoma 치코을위한 트럭,

   intaradusiinga의 jasabinakoma 치코을위한 트럭,

   나도, 1 세대 성과 이름 일치를 지원하는 코드를 확장했다.

     $("#input1").autocomplete({
         source: function(req, responseFn) {
             addMessage("search on: '" + req.term + "'<br/>");
   
             var matches = new Array();
             var needle = req.term.toLowerCase();
   
             var len = wordlist.length;
             for(i = 0; i < len; ++i)
             {
                 var haystack = wordlist[i].toLowerCase();
                 if(haystack.indexOf(needle) == 0 ||
                    haystack.indexOf(" " + needle) != -1)
                 {
                     matches.push(wordlist[i]);
                 }
             }
   
             addMessage("Result: " + matches.length + " items<br/>");
             responseFn( matches );
         }
     });
   

   데모 : http://jsbin.com/ufimu3/

   '이'또는 '다시'를 입력

3. ---

   3.나는 devbridge에서 자동 완성을 사용합니다. http://www.devbridge.com/projects/autocomplete/jquery/

   나는 devbridge에서 자동 완성을 사용합니다. http://www.devbridge.com/projects/autocomplete/jquery/

   그것은 단지, 시작 문자와 일치합니다.

   지금까지 이름 또는 성을 기준으로 매칭 한, 당신은 단지 첫 번째와 마지막 이름의 조회 목록을 제공해야 할 것이다.

   사용 예제 :

     var wordlist = [
         'January', 'February', 'March', 'April', 'May', 'June',
         'July', 'August', 'September', 'October', 'November',
         'December' ]; 
   
         var acOptions = {
             minChars:2,
             delimiter: /(,|;)\s*/, // regex or character
             maxHeight:400,
             width:300,
             zIndex: 9999,
             deferRequestBy: 10, // miliseconds
   
             // callback function:
             onSelect: function(value, data){
                 //$('#input1').autocomplete(acOptions);
                 if (typeof data == "undefined") {
                     alert('You selected: ' + value );
                 }else {
                     alert('You selected: ' + value + ', ' + data);
                 }
             },
   
             // local autosuggest options:
             lookup: wordlist
         };
   

   당신이 자동 완성 컨트롤을 초기화하기 위해 통과하는 검색 옵션은 목록 또는 객체가 될 수 있습니다. 위는 간단한 목록을 보여 주었다. 당신이 반환받을 제안에 부착 된 일부 데이터를 원하는 경우, 다음 검색 옵션이 같은 개체를 만들 :

   var lookuplist = {
       suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
       data :         [ 31, 28, 31, 30, 31, ]
   };
   

4. ---

   4.당신은 문자열의 각 단어의 시작을 검색하려면, 졸개의에 더 우아한 해결책은 cheeso의를 가지고 있었으나 결국 정규 표현식 단어를 경계 특수 문자를 사용하는 것입니다 :

   당신은 문자열의 각 단어의 시작을 검색하려면, 졸개의에 더 우아한 해결책은 cheeso의를 가지고 있었으나 결국 정규 표현식 단어를 경계 특수 문자를 사용하는 것입니다 :

   var matcher = new RegExp( "\\b" + re, "i" );
   

   예 : http://jsbin.com/utojoh/2 (검색 시도 'BL')

5. ---

   5.또 다른 jQuery를 자동 완성 플러그인이 선택적으로 검색 단지 각 항목의 시작 부분에 있습니다 (옵션 matchContains = 거짓, 그 너무 기본 생각).

   또 다른 jQuery를 자동 완성 플러그인이 선택적으로 검색 단지 각 항목의 시작 부분에 있습니다 (옵션 matchContains = 거짓, 그 너무 기본 생각).

   JQuery와 UI 플러그인에서 이러한 옵션의 부재를 감안할 때, 난 당신이 중 하나를 다른 플러그인을 사용하거나 현재 사용하고있는 일을 다시 작성해야합니다 같은데요.

6. ---

   6.당신은 어디에서 자동 완성을 채우기 위해 데이터를 가져 오는거야? 이 데이터베이스에서인가? 그렇다면, 당신은 당신의 쿼리에서 당신이 원하는 일을하고 각 단어의 시작에 맞는 결과 (첫 번째 / 마지막 이름)을 반환 할 수 있습니다

   당신은 어디에서 자동 완성을 채우기 위해 데이터를 가져 오는거야? 이 데이터베이스에서인가? 그렇다면, 당신은 당신의 쿼리에서 당신이 원하는 일을하고 각 단어의 시작에 맞는 결과 (첫 번째 / 마지막 이름)을 반환 할 수 있습니다

from https://stackoverflow.com/questions/2382497/jquery-ui-autocomplete-widget-search-configuration by cc-by-sa and MIT license