Question

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

Answer 1

表格中不需要AutocompleteContainter。它的目的是消除自动完成“弹出窗口”。您在输入中需要输入自动填充的数据，即#query和#query2。

Answer 2

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

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

这是基于我读到你的问题：无法让它发挥作用。但是在阅读了您的其他评论后，看起来您可能已经开始工作，但是正在尝试根据自动填充弹出窗口中的内容执行某些操作...不确定。 -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/

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

2 个答案: