jquery autocomplete에서 이름과 전화 번호로 검색하는 방법은 무엇입니까?

Question

나는 내가 노력

JQuery와 자동 완성에 이름이나 번호를 검색하기 위해 필요한이 :

HTML :

<input type="text" class="form-control" id="plugins" name="plugins" /> 

스크립트 : 내가 검색해야 위의 배열에서

var arraY = [{name: "xxx", phone_number: "9997515744},{name: "abc", phone_number: "9619054073"},{name: "asd", phone_number: "9323135708"}] 
$("#plugins").autocomplete({source: plugin_names}); 

name과 phone_number가 모두 포함되어 있지만 전화 번호 검색 만 작동하면 이름 검색이 작동하지 않습니다.

누구든지 도와주세요.

Answer 1

자동 완성은 단일로, 아래의 인수

request 목적이있는 source으로 콜백 함수를 취 서버 측의 검색을 현재 텍스트 입력에있는 값을 참조하는 용어 속성입니다.

response 콜백. 사용자에게 제안 할 데이터가 하나뿐입니다. 이 데이터는 제공된 용어를 기반으로 필터링되어야하며 간단한 로컬 데이터에 대해 위에 설명 된 형식 중 하나 일 수 있습니다.

체크 아웃 http://api.jqueryui.com/autocomplete/#option-source

당신이 API 문서에서 아래의 코드

var arraY = [{name: "xxx", phone_number: "9997515744"},{name: "abc", phone_number: "9619054073"},{name: "asd", phone_number: "9323135708"}]; 
 

 
// the typed data is in request.term 
 

 
function multipleFieldMatch(request, response) { 
 
    function isMatch(s) { 
 
     return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1; 
 
    } 
 
    var i, len, obj, totalMatches = []; 
 
    len = arraY.length; 
 

 
    if (request.term==="") { 
 
     response([]); 
 
     return; 
 
    } 
 

 
    for (i = 0; i<len; i++) { 
 
     obj = arraY[i]; 
 
     if (isMatch(obj.name) || isMatch(obj.phone_number)) { 
 
      totalMatches.push(obj); 
 
     } 
 
    } 
 
    response(totalMatches); 
 
} 
 

 
$("#plugins").autocomplete({ 
 
    source: multipleFieldMatch 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="form-control" id="plugins" name="plugins" />

Answer 2

당신이해야 아마 아약스 옵션을 사용하여 시도하고

$('#autocomplete').autocomplete({ 
    serviceUrl: '/autocomplete/countries', 
    onSelect: function (suggestion) { 
     alert('You selected: ' + suggestion.value + ', ' + suggestion.data); 
    } 
}); 

Answer 3

로 사용해 볼 수이 링크를, 나는 콜백 함수로 source를 사용하는 것이 좋습니다 것입니다.

기능 : 세번째 변형 콜백은 최상의 유연성을 제공 JSONP 포함한 자동 완성 어떤 데이터 소스에 연결하는데 사용될 수있다. 콜백은

request 개체이며 현재 텍스트 입력에있는 값을 참조하는 단일 term 속성을 갖습니다. 예를 들어 사용자가 도시 입력란에 "new yo"을 입력하면 자동 완성 단어는 "new yo"이됩니다.

response 콜백. 사용자에게 제안 할 데이터가 하나뿐입니다. 이 데이터는 제공된 용어를 기반으로 필터링되어야하며 간단한 로컬 데이터에 대해 위에 설명 된 형식 중 하나 일 수 있습니다. 요청 중에 오류를 처리하기 위해 사용자 정의 소스 콜백을 제공 할 때 중요합니다. 오류가 발생하더라도 항상 response 콜백을 호출해야합니다. 이렇게하면 위젯이 항상 올바른 상태를 유지하게됩니다.

또한, 소스 배열은 label와 value A는, 그것은 더 많은 데이터를 가질 수 포함해야합니다, 그러나이 두 가지가 필수입니다.사용자 정의 데이터에 대한 자세한 내용보기 : 근무 예를

자바 스크립트

var myData = [{ 
    label: "xxx", 
    value: "9997515744" 
}, { 
    label: "abc", 
    value: "9619054073" 
}, { 
    label: "asd", 
    value: "9323135708" 
}]; 
$(function() { 
    $("#plugins").autocomplete({ 
    source: function(req, resp) { 
     var results = []; 
     $.each(myData, function(k, v) { 
     // Make a pass for names 
     if (v.label.indexOf(req.term) != -1) { 
      results.push(v); 
      return; 
     } 
     // Make a pass for phone 
     if (v.value.indexOf(req.term) != -1) { 
      results.push(v); 
      return; 
     } 
     }); 
     resp(results); 
    } 
    }); 
}); 

: 나는 같은 것을 권합니다

http://jqueryui.com/autocomplete/#custom-datahttps://jsfiddle.net/Twisty/urtkxo46/