JQUERY의 자동 완성과 비슷한 맞춤 구성 요소

Question

입력 한 단어와 동일한 단어/s를 표시해야하는 텍스트 입력란에 목록이 필요한 특정 요구 사항이 있습니다. 이것은 자동 완성과 비슷하지만, 사용자가 Color를 입력하면 제안서에 Color를 입력 한 순간 Color가 표시되어야하며 그 반대의 경우도 마찬가지입니다. 이것은 자동 완성에서 결코 일어나지 않을 것입니다. 자동 완성에서는 단어에 공통 문자가있는 한 제안이 표시됩니다. 나는이 링크를 따라 가고 있었다. https://jqueryui.com/autocomplete/

하지만 위의 요구 사항을 충족하지 못합니다. 나중에 사용자가 단어를 완성하면 채워질 사용자 지정 목록을 만들려고했습니다. 그러나 위의 시나리오에서 마지막 3자를 삭제하고 두 단어에 공통된 글자로 돌아 가지 않으면 목록이 계속 표시되지 않습니다.

친절히 제안합니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

autocomplete 님의 함수 소스 옵션을 사용하십시오. 그런 다음 특정 용어에 대해 반환 할 항목을 결정할 수 있습니다. 아래 예제에서 두 가지 대체 목록 (teh/the 및 color/color)을 정의했습니다. 사용자가 col을 입력하면 두 가지 모두를 제안으로 받게됩니다. 그들은 color을 입력하면 colour을 제안합니다. teh 및 the과 유사합니다.

당신이 정말 startsWith 동등의 lastIndexOf 로직을 제거 전체 일치 (때까지 그것을 반환 할 수없는 경우.

$(function() { 
 
    
 
    var availableTags = [ 
 
    \t ["color", "colour"], 
 
     ["the", "teh"] 
 
    
 
    ]; 
 

 
    var tagFunction = function(request, response) { 
 
     var term = request.term.toLowerCase(); 
 
    \t for (var i = 0; i < availableTags.length; i++) 
 
     {  
 
     if (availableTags[i][0].lastIndexOf(term, 0) === 0 
 
      && availableTags[i][1].lastIndexOf(term, 0) === 0) 
 
     { 
 
      response(availableTags[i]); 
 
     } 
 
     \t else if (availableTags[i][0].lastIndexOf(term, 0) === 0) 
 
     { 
 
     \t response([availableTags[i][1]]); 
 
     } 
 
     else if (availableTags[i][1].lastIndexOf(term, 0) === 0) 
 
     { 
 
      response([availableTags[i][0]]); 
 
     } 
 
     } 
 
    } 
 
    
 
    $("#tags").autocomplete({ 
 
     source: tagFunction 
 
    }); 
 
    });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
    
 
<input id="tags" />