jQuery autocomplete 결과 텍스트 상자 외에 무언가에 대한 결과가 있습니까?

StackOverflow https://stackoverflow.com/questions/2232363

  •  19-09-2019
  •  | 
  •  

문제

좋아, 나는 지금 2 주 동안이 자동 완성 된 것들을 엉망으로 만들고 있었고, 그것은 나에게 두통을주기 시작했다! 나는 필요한 거의 모든 일을하기 위해 그것을 얻었지만 한 번의 문제에 매달 렸습니다. 함께 묶인 두 개의 자동 완성 텍스트 입력이 있습니다. 첫 번째 입력을 통해 사용자는 MySQL 데이터베이스 테이블에서 사람을 선택할 수 있습니다. 그런 다음 해당 선택에 따라 두 번째 입력을 통해 사용자는 주소 데이터베이스 테이블에서 사람의 주소 중 하나를 선택할 수 있습니다. 이 부분은 모두 잘 작동합니다.

문제가있는 자동 완성 필드는 주소 테이블을 쿼리하고 각 결과를 배열 슬롯에 다음과 같이 저장합니다.

제목 | Street_address | City | State | Zip

선택한 항목의 데이터를 SPAN 태그의 InnerHTML에 출력하려고 할 때 문제가 발생합니다.

Formatitem 옵션을 사용하여 자동 완성 목록에 제목 만 표시했습니다. 항목을 선택하면 입력 상자 아래의 SPAN 태그에 Street_address, City, State 및 Zip을 표시하려고합니다. 정보가 얻어 지지만 Formatitem 기능이 모든 행을 자동으로 읽으므로 Street_address, 도시, 상태 및 zip을 표시합니다. 마지막 선택된 목록 대신 목록의 항목. 그러나 텍스트 입력으로 반환되는 것은 선택한 항목의 제목입니다. 매우 실망 스럽습니다!

이 문제를 어떻게 정리할 수 있는지 아는 사람이 있습니까 ???

도움을 주셔서 감사합니다!

도움이 되었습니까?

해결책

나는 당신이 사용하고 있다고 가정하고 있습니다 http://code.google.com/p/jquery-autocomplete/ 또는 변형 중 하나. 당신이해야 할 일은 onitemSelect에 이벤트를 첨부하는 것입니다. 이전 버전에서는 Li 요소와 선택적 추가 데이터 배열이 나타납니다. 가장 최근 버전 (다시 쓰기 후)에서는 표준 값 및 선택적 데이터 응답이 나타납니다. 혼란 스러우면이 설정으로 시작하십시오 (Firebug 또는 Othe Console.log 제공 업체) :

...
onItemSelect = function(a, b) { console.log(a); console.log(b); }
...

사용중인 버전의 응답이 표시됩니다. 거기에서 일할 수 있습니다.

작동 할 수 있는지 알려주세요. 문제가 발생하면 더 완전한 예를 작성하겠습니다.

다른 팁

데모

JS 코드 :

$(function() {
var houses = [
{
    title: "House 1",
    value: "House 1",
    street_address: "Address 1",
    city: "City 1",
    state:"State 1",
    zip:123456
},
{
    title: "House 2",
    value: "House 2",
    street_address: "Address 2",
    city: "City 2",
    state:"State 2",
    zip:456123    
}
];
$( "#house" ).autocomplete({
minLength: 0,
source: houses,
/*focus: function( event, ui ) {
$( "#project" ).val( ui.item.label);
return false;
},*/
select: function( event, ui ) {
    $('#house_address').html(ui.item.street_address+", "+ui.item.city+", "+ui.item.state+", "+ui.item.zip);
    return false;
}
})

});

HTML :

<div id="project-label">Select a house(type like "h" for a start):</div>
<input type="text" id="house">     
<br>
House complete address:<br>    
<span id="house_address"></span>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top