jQuery AutoComplete приводит к чему-то, кроме текстовых полей? - PullRequest
Новая
       11

jQuery AutoComplete приводит к чему-то, кроме текстовых полей?

1 голос
/ 09 февраля 2010

Хорошо, я вот уже 2 недели возлюсь с этим автозаполнением, и у меня начинает болеть голова! Я получил это, чтобы сделать почти все, что мне нужно, но я одержим одной проблемой. У меня есть два автозаполнения ввода текста, которые связаны между собой. Первый ввод позволяет пользователю выбрать человека из таблицы базы данных MySQL. Затем на основе этого выбора второй вход позволяет пользователю выбрать один из адресов человека из таблицы базы данных адресов. Эта часть все отлично работает.

Проблемное поле автозаполнения запрашивает таблицу адресов и сохраняет каждый результат в слоте массива следующим образом:

название | street_address | город | состояние | застежка-молния

Проблема возникает, когда вы просто пытаетесь вывести данные выбранного элемента в innerHTML тега SPAN.

Я использовал опцию formatItem для отображения только заголовка в списке автозаполнения. После выбора элемента я хочу, чтобы он затем отображал street_address, city, state и zip в теге SPAN под полем ввода. Он получает информацию, но так как функция formatItem автоматически считывает каждую строку, он отображает street_address, city, state и zip элемента last в списке вместо того, который выбран. Однако то, что возвращается к текстовому вводу, является названием выбранного элемента. Это очень расстраивает!

Кто-нибудь знает, как я могу решить эту проблему ???

Заранее спасибо за любую помощь!

Ответы [ 2 ]

1 голос
/ 19 февраля 2010

Я предполагаю, что вы используете http://code.google.com/p/jquery-autocomplete/ или один из вариантов. Что вам нужно сделать, это прикрепить событие к onItemSelect. В старых версиях вы получили элемент LI и необязательный дополнительный массив данных. В самой последней версии (после перезаписи) вы получаете стандартное значение и необязательный ответ на данные. Если вы не уверены, просто начните с этой настройки (при условии, что Firebug или другой поставщик console.log): 

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

Это покажет вам ответ версии, которую вы используете. Вы можете работать оттуда.

Дайте мне знать, сможете ли вы заставить его работать. Если у вас возникнут проблемы, я напишу более полный пример.

0 голосов
/ 14 июля 2014

DEMO

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>
...