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

发布于 2024-11-30 04:21:24 字数 2561 浏览 1 评论 0原文

你好，我正在使用 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>
<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>

如何将这两个 AutocompleteContainer div 附加到我的文本框？请帮忙。

原文

Hi, I am using jquery autocomplete plugin. It works nicely, but the problem is the autocomplete data appends outside the form. It is ok when using one auto complete text box, but when using two auto complete textboxes it is very hard to get the values and do coding.

I want to append the AutocompleteContainter div to my text box, so then I can get the values easily.

Here is my code:

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>

When viewed in FireBug, AutocompleteContainer is added after the closing </form> tag:

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

How can I append these two AutocompleteContainter div's to my text boxes? Please help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

老子叫无熙 2024-12-07 04:21:24

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

回复收藏 0 原文

请别遗忘我 2024-12-07 04:21:24

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

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

这是基于我读到的你的问题：无法让它工作。但是在阅读您的其他评论后，您似乎可以正常工作，但正在尝试根据自动完成弹出窗口中单击的内容执行某些操作...不确定。 -u-

如果是这样，您可以向文本框添加一个 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)
                }
    });

这是一个工作示例：

There is probably a formatting/styling error somewhere. Here is an example of it working as expected: http://jsfiddle.net/N6DC6/1

On a live page, I get the same result: some of the code for autocomplete is appended after the closing form tag. This is OK; what matters is that the value populates into the text box to be submitted. This, again, leads me to believe there is an issue with formatting and/or styling.

This is based on what I read your question as: can't get it to work. But upon reading your other comments, it looks like you may have it working, but are trying to do something based on what is clicked within the autocomplete pop-up... Not sure. -u-

If so, you could add an onChange listener to the txt boxes and do something if a certain criterion is met.

EDIT

Here is the solution:

You need to add a select option to the instantiation of the autocomplete element:

        $( "#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)
                }
    });

Here's a working example: http://jsfiddle.net/N6DC6/3/

回复收藏 0 原文

~没有更多了~