如何将 jquery 自动完成数据附加到文本字段？答案

【问题标题】：how to append jquery auto complete data to text field?如何将 jquery 自动完成数据附加到文本字段？
【发布时间】：2011-08-17 12:14:17
【问题描述】：

您好，我正在使用 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 附加到我的文本框中？请帮忙。

【问题讨论】：

标签： jquery codeigniter jquery-plugins jquery-autocomplete

【解决方案1】：

您不需要在表单中使用 AutocompleteContainter。它的目的是仅显示自动完成“弹出窗口”。您在输入中拥有所需的数据，并在其中附加了自动完成功能，即 #query 和 #query2。

【讨论】：

sooo if $('.autocomplete > div').live('click',function(){ 我怎么能从#query或#query2得到它
您可能正在做一些您不需要的事情。 :) 你为什么要在$('.autocomplete > div') 上做点什么？
当 $('.autocomplete > div').live('click',function() 我想将该值添加到另一个 div 时，有 2 个不同的 div 添加两个文本框'价值观
@K.B Panamaldeniya-littletipz 我已经用可能的解决方案更新了我的答案。

【解决方案2】：

某处可能存在格式/样式错误。这是一个按预期工作的示例：http://jsfiddle.net/N6DC6/1

在实时页面上，我得到了相同的结果：一些自动完成代码附加在结束 form 标记之后。还行吧;重要的是该值填充到要提交的文本框中。这再次让我相信格式和/或样式存在问题。

这是基于我将您的问题解读为：无法正常工作。但是在阅读您的其他 cmets 后，您似乎可以使用它，但是正在尝试根据在自动完成弹出窗口中单击的内容来做一些事情......不确定。 -u-

如果是这样，您可以在 txt 框中添加一个 onChange 侦听器，并在满足特定条件时执行某些操作。

编辑

解决方法如下：

您需要在自动完成元素的实例化中添加一个选择选项：

        $( "#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/

【讨论】：