의 jQuery 자동 완성 - 값 표시 라벨에서 검색 내가 휴대 전화의 레이블/값 목록에 JQuery와 자동 완성을 사용하고

Question

:

[ { label: "Samsung Galaxy S7", value: "Samsung Galaxy S7"}, 
    { label: "Samsung Galaxy S6", value: "Samsung Galaxy S6"}, 
..... 
] 

내가 시리즈의 이름을 명시 할 않고 연구를 수행하고자하는, 즉 사용자의 경우 유형 "삼성 S7 '자동 완성 내가 다음과 같이 소스를 수정하려고

"삼성 갤럭시 S7 "제안 :

[ { label: "Samsung Galaxy S7 Samsung S7", value: "Samsung Galaxy S7"}, 
    { label: "Samsung Galaxy S6 Samsung S6", value: "Samsung Galaxy S6"}, 
..... 
] 

이 코드는 작동하지만, 추한은 A 때문에 utocomplete 메뉴는 간단한 "Samsung Galaxy S6"대신 "Samsung Galaxy S6 Samsung S6"을 표시합니다.

메뉴에 다른 것을 표시하면서 조사를 수행 할 수있는 방법이 있습니까?

Answer 1

source 옵션을 사용하여 사용자 지정 검색 논리를 작성해야합니다. 간단한 유스 케이스의 경우 다음과 같은 것을 할 것이다. 자세한 내용은 jQuery UI Autocomplete widget search configuration을 참조하십시오.

어쩌면 가장자리 사례를 처리하기 위해 복잡한 정규식이 필요합니다. 정적/신뢰할만한 데이터 소스를 가지고있는 경우에는 필요하지 않습니다.

$(document).ready(function() { 
 

 
    var devices = [{ 
 
    label: "Samsung Galaxy S7", 
 
    value: "Samsung Galaxy S7" 
 
    }, { 
 
    label: "Samsung Galaxy S6", 
 
    value: "Samsung Galaxy S6" 
 
    }]; 
 

 
    $("#devices").autocomplete({ 
 
    source: function(req, responseFn) { 
 
     var words = req.term.split(' '); 
 
     var results = $.grep(devices, function(device, index) { 
 
     var sentence = device.label.toLowerCase(); 
 
     return words.every(function(word) { 
 
      return sentence.indexOf(word.toLowerCase()) >= 0; 
 
     }); 
 
     }); 
 
     responseFn(results); 
 
    } 
 
    }); 
 

 
});

input { 
 
    margin-top: 100px; 
 
}

<link href="https://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
 
<input type="text" id="devices" />