jQuery UI 텍스트 상자에 여러 값 자동 완성

Question

간단한 자동 완성 검색 기능이 필요하지만 사용자가 둘 이상의 값을 입력 할 수 있어야합니다. jQuery UI의 자동 완성 위젯 (http://jqueryui.com/autocomplete/)을 사용하고 있으며 지금까지 제안의 첫 글자 만 검색하도록 소스를 설정했습니다. 지금 추가하고 싶은 것은 사용자가 동일한 텍스트 상자에서 여러 항목을 검색 할 수있는 기능입니다. (즉, 쉼표를 다시 표시 한 후에)

나는이 작업이 어떻게 수행 될 수 있는지 검색하려고 노력해 왔습니다. 내가 찾은 유일한 방법은 추가 할 수있는 옵션입니다. multiple: true (http://forum.jquery.com/topic/multiple-values-with-autocomplete). 옵션이 변경되었거나 더 이상 존재하지 않는지 알 수 없으므로 문서에 더 이상 나열되지 않습니다.

var items = [ 'France', 'Italy', 'Malta', 'England', 
     'Australia', 'Spain', 'Scotland' ]; 

    $(document).ready(function() { 
     $('#search').autocomplete({ 
      source: function (req, responseFn) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp('^' + re, 'i'); 
       var a = $.grep(items, function (item, index) { 
        return matcher.test(item); 
       }); 
       responseFn(a); 
      }, 
      multiple: true 
     }); 
    }); 

Answer 1

DEMO를 참조

var items = [ 'France', 'Italy', 'Malta', 'England', 
     'Australia', 'Spain', 'Scotland' ]; 

    $(document).ready(function() { 
     $('#search').autocomplete({ 
      source: function (req, responseFn) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp('^' + re, 'i'); 
       var a = $.grep(items, function (item, index) { 
        return matcher.test(item); 
       }); 
       responseFn(a); 
      } 
     }); 
    }); 

내가 뭘하려 :

이

내 코드입니다 같은 textbox 그리고 다음을 수행 한 문자열의 시작과 일치하는 제안 만 표시하는 정규식을 포함합니다.

$('#search').autocomplete({ 
     minLength: 1, 
     source: function (request, response) { 
      var term = request.term; 

      // substring of new string (only when a comma is in string) 
      if (term.indexOf(', ') > 0) { 
       var index = term.lastIndexOf(', '); 
       term = term.substring(index + 2); 
      } 

      // regex to match string entered with start of suggestion strings 
      var re = $.ui.autocomplete.escapeRegex(term); 
      var matcher = new RegExp('^' + re, 'i'); 
      var regex_validated_array = $.grep(items, function (item, index) { 
       return matcher.test(item); 
      }); 

      // pass array `regex_validated_array ` to the response and 
      // `extractLast()` which takes care of the comma separation 

      response($.ui.autocomplete.filter(regex_validated_array, 
       extractLast(term))); 
     }, 
     focus: function() { 
      return false; 
     }, 
     select: function (event, ui) { 
      var terms = split(this.value); 
      terms.pop(); 
      terms.push(ui.item.value); 
      terms.push(''); 
      this.value = terms.join(', '); 
      return false; 
     } 
    }); 

    function split(val) { 
     return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
     return split(term).pop(); 
    } 

Answer 2

이 시도 :

function split(val) { 
    return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
    return split(term).pop(); 
    } 

    $("#search") 
     .autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       response($.ui.autocomplete.filter(
        items, extractLast(request.term))); 
      }, 
      focus: function() { 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       terms.pop(); 
       terms.push(ui.item.value); 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
     }); 

여러 문자열의 문제를 해결하기 위해