동적으로 데이터 소스 변경하기 jQuery와 자동 완성 입력 문자

Question

jQuery 자동 완성을 사용하여 입력 상자에 다른 데이터 소스 옵션을 사용하려고 시도하고 있습니다.

id가 #polysearch 인 입력 상자가 있습니다. 소스 옵션 'data1'을 사용하여 커서를 놓은 상태에서 입력 상자를 자동 완성하고 2자를 입력 할 때 소스 옵션 'data2'로 입력 상자를 자동 완성하고 싶습니다. 도와주세요!

감사합니다.

Answer 1

자동 완료를 위해 source 옵션을 사용하면 request.term 길이에 따라 사용할 배열을 사용자 정의 할 수 있습니다 (사용자가 상자에 입력 한 내용).

입력이 집중 될 때 자동 완료의 search 메서드를 수동으로 호출하여 포커스가 열려 있도록해야합니다.

다음은이 코드를 작성한 것입니다. See it in action.

$(function() { 
    var data1 = 'abcdefghijklmnopqrstuvwxyz'.split(''); 
    var data2 = 'cat dog fish shark unicorn sasquatch flamingo dingo snake mouse rat'.split(/\s+/g); 

    $('#in').autocomplete({ 
     minLength: 0, // so it shows straight away without typing anything 
     source: function (request, response) { 
      if ((request.term || '').length <= 1) 
       response(filter(data1, request.term)); 
      else 
       response(filter(data2, request.term)); 
     } 
    }).on('focus', function() { 
     $(this).autocomplete('search', ''); 
    }); 

    function filter(array, searchTerm) { 
     var matchingItems = []; 
     for (var i = 0; i < array.length; i++) { 
      if (array[i].indexOf(searchTerm.toLocaleLowerCase()) >= 0) 
       matchingItems.push(array[i]); 
     } 
     if (matchingItems.length === 0) 
      return ['No Matches']; 
     return matchingItems; 
    } 
});