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

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

---

jQuery UI 자동 완성 위젯을 사용하여 이름 또는 성으로 사용자 조회를 구현 하는 방법을 찾고 있습니다. 기본적으로 자동 완성은 단어의 발생에 관계없이 문자 시퀀스별로 단어를 조회하는 것처럼 보입니다. 따라서 다음 javascript, asp, haskell과 같은 데이터 'as'가 있고 입력 하면 세 가지가 모두 표시됩니다. 단어의 시작 부분 만 일치시키고 싶습니다. 따라서 위의 예에서는 'asp'. 이 작업을 수행하도록 자동 완성 위젯을 구성하는 방법이 있습니까?

궁극적 으로 Gmail 에서처럼 이름 또는 성의 시작 으로 일치하는 것이 더 좋습니다 .

참고 : 특히 jQuery UI 위젯을 사용하여이 작업을 수행하는 방법을 찾으려고합니다. 프로젝트에서 이미 jQuery UI를 사용하고 있기 때문에이를 고수하고 웹 애플리케이션에 추가 라이브러리를 추가하지 않을 계획입니다.

---

jQuery UI v1.8rc3 에서 자동 완성 위젯 은 문자열, 배열 또는 콜백 함수일 수 있는 소스 옵션을 허용 합니다. 문자열 인 경우 자동 완성은 해당 URL에서 GET을 수행하여 옵션 / 제안을 가져옵니다. 배열의 경우 자동 완성은 지적했듯이 배열 용어의 모든 위치에 유형이 지정된 문자가 있는지 검색합니다. 마지막 변형은 당신이 원하는 것입니다-콜백 함수.

자동 완성 문서에서 :

세 번째 변형 인 콜백은 가장 유연하며 모든 데이터 소스를 자동 완성에 연결하는 데 사용할 수 있습니다. 콜백은 두 개의 인수를받습니다.

• request현재 텍스트 입력에있는 값을 참조하는 "term"이라는 단일 속성이있는 개체. 예를 들어, 사용자가 자동 ​​완성을 수행하도록 설정된 도시 필드에 "new yo"를 입력하면 "new yo" request.term가 유지됩니다.
• response함수, 사용자에게 제안 할 데이터가 포함 된 단일 인수를 예상하는 콜백. 이 데이터는 제공된 용어를 기반으로 필터링되어야하며, 단순 로컬 데이터에 허용되는 형식 (라벨 / 값 / 둘 다 속성이있는 문자열 배열 또는 객체 배열)의 배열이어야합니다.

예제 코드 :

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

몇 가지 핵심 사항 :

• $.ui.autocomplete.escapeRegex(req.term);That에 대한 호출 은 검색 용어를 이스케이프 하여 사용자가 입력 한 텍스트의 정규식 용어가 일반 텍스트로 처리되도록합니다. 예를 들어, 점 (.)은 정규식에 의미가 있습니다. 자동 완성 소스 코드를 읽고이 escapeRegex 함수를 배웠습니다.
• 와 라인 new Regexp(). ^ (Circumflex)로 시작하는 정규 표현식을 지정합니다. 이는 입력 된 문자가 배열의 용어 시작 부분에 나타날 때만 일치한다는 것을 의미합니다. 또한 대소 문자를 구분하지 않는 일치를 의미하는 "i"옵션을 사용합니다.
• $.grep()유틸리티는 제공된 배열의 각 용어에 제공된 함수를 호출합니다. 이 경우 함수는 단순히 regexp를 사용하여 배열의 용어가 입력 된 항목과 일치하는지 확인합니다.
• 마지막으로 responseFn ()이 검색 결과와 함께 호출됩니다.

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

어떻게 생겼는지 :

참고 :이 시점에서 자동 완성에 대한 문서는 매우 미숙합니다. 이 작업을 수행하는 예제를 찾지 못했고 어떤 .css 파일이 필요하거나 어떤 .css 클래스가 사용되는지에 대한 작업 문서를 찾을 수 없었습니다. 나는이 모든 것을 코드 검사에서 배웠다.

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

---

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

The lookup option that you pass to initialize the autocomplete control can be a list, or an object. The above showed a simple list. If you want some data attached to the suggestions that get returned, then make the lookup option an object, like this:

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

---

thx cheeso for intrducing jsbin.com,

i extended your code to support first- and lastname matches, too.

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

demo: http://jsbin.com/ufimu3/

type 'an' or 're'

---

If you want to search the beginning of each word in the string, a more elegant solution to henchman's is to take cheeso's but just use the regexp word boundary special character:

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

Example: http://jsbin.com/utojoh/2 (try searching for 'bl')

---

선택적으로 각 항목의 시작 부분 만 검색하는 또 다른 jQuery 자동 완성 플러그인 이 있습니다 (옵션은 matchContains=false, 이것이 기본값이라고 생각합니다).

jQuery UI 플러그인에 이러한 옵션이 없다는 점을 감안할 때 다른 플러그인을 사용하거나 지금 사용중인 플러그인을 다시 작성해야 할 것 같습니다.

---

자동 완성을 채우기위한 데이터는 어디에서 얻습니까? 데이터베이스에서 가져온 것입니까? 그렇다면 쿼리에서 원하는 작업을 수행하고 각 단어의 시작 부분 (이름 / 성)과 일치하는 결과 만 반환 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/2382497/jquery-ui-autocomplete-widget-search-configuration