Как добавить JQuery автозаполнения данных в текстовое поле? - PullRequest
Новая
       34

Как добавить JQuery автозаполнения данных в текстовое поле?

1 голос
/ 17 августа 2011

Привет, я использую плагин автозаполнения jquery. Это хорошо работает, но проблема в том, что данные автозаполнения добавляются за пределы формы. Это нормально при использовании одного текстового поля с автозаполнением, но при использовании двух текстовых полей с автозаполнением очень трудно получить значения и выполнить кодирование.

Я хочу добавить AutocompleteContainter div к моему текстовому полю, чтобы я мог легко получить значения.

Вот мой код:

JQuery 

options = { serviceUrl: "<? echo $this->config->item('base_url'); ?>index.php/welcome/autocomplete" };    
a=$('#query').autocomplete(options);

options = { serviceUrl: "<? echo $this->config->item('base_url'); ?>index.php/welcome/autocomplete" };    
a=$('#query2').autocomplete(options);

HTML 

<body>

<?php echo form_open("welcome/test");?>
<fieldset>
    <div id="add-brands-container" class="hide1" style=""></div>
    <div class="clear-fix"></div>
    <input type="text" name="textbox" id="query"  style="display:block" />
    <input type="text" name="textbox2" id="query2"  style="display:block" />
    <input type="submit" name="mysubmit" value="Submit" />
</fieldset> 

    <?php echo form_close();?>

</body>

При просмотре в FireBug AutocompleteContainer добавляется после закрывающего тега </form>: 

</form>
<div style="position: absolute; z-index: 9999; top: 33.85px; left: 10.8833px;" id="AutocompleteContainter_32baa">
    <div class="autocomplete-w1">
        <div style="display: none; width: 115px; max-height: 300px;" id="Autocomplete_32baa" class="autocomplete">
            <div title="january" class="">j<strong>a</strong>nu<strong>a</strong>ry</div>                  
            <div title="february" class="selected">febru<strong>a</strong>ry</div>
            <div title="march">m<strong>a</strong>rch</div> 
            <div title="april"><strong>a</strong>pril</div>
            <div title="may">m<strong>a</strong>y</div>
            <div title="august"><strong>a</strong>ugust</div>
        </div>
    </div>
</div>

<div style="position: absolute; z-index: 9999; top: 53.85px; left: 10.8833px;" id="AutocompleteContainter_5c3c7">
    <div class="autocomplete-w1">
        <div style="display: none; width: 115px; max-height: 300px;" id="Autocomplete_5c3c7" class="autocomplete"></div>
    </div>
</div>

Как я могу добавить эти два AutocompleteContainter div в мои текстовые поля? Пожалуйста, помогите.

Ответы [ 2 ]

0 голосов
/ 17 августа 2011

Возможно, где-то есть ошибка форматирования / стилизации.Вот пример того, как он работает, как и ожидалось: http://jsfiddle.net/N6DC6/1

На живой странице я получаю тот же результат: часть кода для автозаполнения добавляется после закрывающего тега form.Хорошо;важно, чтобы значение попало в текстовое поле для отправки.Это снова приводит меня к мысли, что есть проблема с форматированием и / или стилем.

Это основано на том, что я прочитал ваш вопрос как: не могу заставить его работать.Но после прочтения ваших других комментариев, похоже, вы работаете, но пытаетесь что-то сделать, основываясь на том, что щелкнуло во всплывающем окне автозаполнения ... Не уверен.-u-

Если это так, вы можете добавить прослушиватель onChange к текстовым полям и сделать что-то, если удовлетворяется определенный критерий.

РЕДАКТИРОВАТЬ

Вот решение:

Вам необходимо добавить опцию select для создания экземпляра элемента автозаполнения: 

        $( "#query" ).autocomplete({
        source: availableTags,
        select: function(event, ui){
                    $('#div1').html(ui.item.value)
                }
    });
    $( "#query2" ).autocomplete({
        source: availableTags2,
        select: function(event, ui){
                    $('#div2').html(ui.item.value)
                }
    });

Вот рабочий пример: http://jsfiddle.net/N6DC6/3/

0 голосов
/ 17 августа 2011

Вам не нужно это AutocompleteContainter внутри формы. Его цель - отключить автозаполнение только "всплывающих окон". У вас есть данные, которые вам нужны во входах, к которым вы прикрепили автозаполнения, то есть #query и #query2.

...