jQuery autocomplete 결과 텍스트 상자 외에 무언가에 대한 결과가 있습니까?
-
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>