jqueryUI 추가 데이터로 자동 완성 하시겠습니까?

Question

사용 jQueryUI Autocomplete

다른 데이터를 상자의 결과 목록에 첨부하고 싶습니다. 예를 들어 내 데이터 세트는 다음과 같습니다.

[ 
    { 
     "name": "John's wild bacon emporium", 
     "code": "BACON" 
    }, 
    { 
     "name": "Jill and Jack's well", 
     "code": "WELL" 
    }, 
    { 
     "name": "Herp and derp", 
     "code": "HD" 
    } 
] 

그러나 jQueryUI docs는 문자열의 플랫 배열이 필요하다고 말합니다.

사용자는 코드로 검색하지 않고 이름으로 검색합니다. 더 중요한 것은 데이터 코드 xxx 또는 일부 다른 부두를 통해 select: function(event, ui) {/*...*/}을 볼 때 해당 코드의 내용에 액세스 할 수 있기를 원합니다. 두 번째 목록을 사용하여 레이블 내용과 문자열을 일치시키지 않아야합니다 (중복 된 이름을 어떻게 든 가질 수 있고 사용자는 결코 혼란에 빠지지 않을 수 있습니다). 이름 데이터에 코드 데이터를 붙이고 싶습니다.

이 질문은 asked in 2008 이었지만 그 이후로는 더 이상 .result()이 아닙니다.

Answer 1

그러나 jQueryUI 워드 프로세서는 플랫 문자열 배열을 원한다고 말합니다.

Actually :

로컬 데이터 문자열의 간단한 배열 될 수 있거나,이 라벨 또는 어느 하나와 배열 각 항목 개체 포함 값 또는 둘 모두입니다.

그래서 한 데이터가 배열의 각 개체에 대한 적어도value 속성이 같은 위젯을 처리 할 수 ​​

[ 
    { 
     "name": "John's wild bacon emporium", 
     "code": "BACON", 
     "value": "Bacon", 
    }, 
    { 
     "name": "Jill and Jack's well", 
     "code": "WELL" 
     "value": "Well" 
    }, 
    { 
     "name": "Herp and derp", 
     "code": "HD", 
     "value": "Herp" 
    } 
] 

사용자의 쿼리가 value 특성에 대해 일치됩니다 라벨이 필요하지 않음을 알리고 자동 완성 옵션 목록에 다른 것을 표시하려는 경우에만 지정하십시오 (value 제외).

당신은 select 이벤트 핸들러 내부의 항목에 대한 추가 데이터에 액세스 할 수 있습니다

select: function(event, ui) { 
    alert(ui.item.code); // Access the item's "code" property. 
} 

희망을. 다음은 간단한 예입니다. http://jsfiddle.net/vR3QH/. name 속성을 제거하고 대신 value 속성을 사용하고 있습니다. 항목을 선택할 때마다 input 요소가 선택한 항목에 속한 속성 값으로 업데이트됩니다.