标签: jquery-ui-autocomplete

我正在尝试使用jQuery ui lib创建一个网页.我的设计在表单顶部的输入字段上使用jQuery ui自动完成.紧接在此自动完成输入表单下方的是一些jQuery滑块.问题是当自动完成框填充时,结果显示在滑块控件的句柄后面.这来自于jQuery构建滑块的方式,它使得它们的z-index为3. jquery自动完成控件的下拉部分的z-index似乎总是设置为1.我尝试增加z - 自动完成的输入元素的索引但似乎不影响jquery为自动完成下拉列表创建的元素的z-index.我也尝试编写自己的javascript来逐个获取下拉菜单(它是一个ul)并手动设置它' s z-index.这似乎也不起作用.我假设这意味着,不知何故jQuery代码覆盖了我正在制作的z-index变化.这不是浏览器错误,因为它是Firefox,Chrome,Safari和IE上的问题.实际的z-index是一个问题,jQuery给出了下拉框(UL元素).

有没有人有这个问题的解决方案？人们通常如何摆弄jQuery自动生成的元素来构建它的控件.

在论坛帖子"如何使jquery自动完成工作为一个可信的DIV而不仅仅是INPUT,TEXTAREA字段." 我们看到如何在一个可信的div元素上运行自动完成,但是与datepicker相结合,datepicker根本就不会填充输入字段.

正如你在这个jsFiddle演示中看到的那样:http://jsfiddle.net/xvnaA/

任何人都有任何明智的想法如何解决这个问题？

简短版问题

当输入字符串与结果字符串匹配时，自动完成功能起作用，但在其他情况下不起作用。数据已成功从JSON中检索。

较长的版本

我想用JSON数据动态编辑自动完成的源内容。

当搜索字符串匹配first_name和last_name字段时，以下方法有效。

但是JSON网址返回的更多，例如，在搜索用户名时，它仍返回正确的数据。但这在自动完成功能中并未显示，我的理论是自动完成功能UI会强制“输入值”与“结果值”相同。

JSON数据返回：

[
        {"pk": 1012912, "fields": {"first_name": "Barack", "last_name": "Obama"}}, 
        {"pk": 1017519, "fields": {"first_name": "George", "last_name": "Bush"}}
]

自动完成代码

如您所见，结果集是由搜索功能设置的。

$('#search').autocomplete({
    source: [],
    search: function(event, ui){
        results = [];
        var json = jQuery.getJSON('http://jsondata.com?query='+event.target.value, function(data){
            for (var i=0; i<data.length; i++){
                results.push(data[i].fields.first_name + ' ' +data[i].fields.last_name); 
            };
        }).success(function(){
            $('#search').autocomplete('option', 'source', results);
            //The following debug proves that the 'results' are correct, even on search for usernames
            console.log(results);
        });
    },
});

如果在#search字段中搜索“ Barack Obama”，我会得到结果，没问题。但是，如果说巴拉克·奥巴马（Barack Obama）的用户名是“ baracko”，并且我搜索他的用户名，那么我会从JSON和结果数组（如我用console.log进行检查）中获得正确的结果，但未显示结果。

有人知道为什么吗？ …

非常简单的问题(但我无法在网上找到答案......):我有一个自动完成字段以这种方式设置:

$(document).ready ->
         $('#projecttask_user_name').autocomplete
                 source: "/autocomplete/users"

我希望jquery在我选择字段时触发源,以便获得完整的可能性列表,即使我没有在字段中输入任何内容.

我怎样才能做到这一点？谢谢!

我在这里看到了这篇文章：jQuery UI带有项目和ID的自动完成功能，但是我无法弄清楚。

这是我的输入HTML：

<input type="text" class="tags" style="width:250px; height:24px;"> </input>' 
<input type="hidden" name="tags_id" id="tags_id" />

这是我的ajax电话：

var data = {};
$.get('/tags',data, function(tag_list) {
                autocomplete_source_list = [];

                for(var i = 0; i < tag_list.length; i++){
                    autocomplete_source_list.push([tag_list[i].fields.display_name, [2,3,4,5,6,7,8,9,1,2]]);
                }
                jQuery( ".tags" ).autocomplete({
                    source: autocomplete_source_list,
                    select: function (event, ui) {
                        $(".tags").val(ui.item.label); // display the selected text
                        $(".tags_id").val(ui.item.value); // save selected id to hidden input
                        console.log("selected id: ", ui.item.label)
                    }
                });

            });

我应该如何设置ID，我应该将2D数组传递给源？当我给出源代码只是文本时，则ui.item.value = ui.item.label =“任何文本”。我看不到ID的附加方式。

请给我一些帮助。谢谢

我已经获得了以下代码并稍微修改了原始示例页面:

http://jsfiddle.net/zK3Wc/21/

不知何故,如果你使用的向下箭头按钮,浏览清单,它显示在搜索字段中的值(数字),而不是标签,但该守则的规定,即在选择时,标签应设置为值.

我需要的是在搜索字段中显示标签而不是数字,但如果我点击一个项目,它在网址中有数字值,使用向下箭头按钮时相同.

拉莫

我有一个页面使用jquery的自动完成功能,对于我的生活,我无法删除/修改应用于下拉列表的样式.

我正在使用谷歌CDN的jquery-ui CSS,所以我试图避免在本地保存并修改它:)

使用CSS,我尝试重写UL(.ui-autocomplete),LI(.ui-menu-item)和LI中的锚标签 - 我有很多工作,但似乎添加了填充在我的CSS之后,当我将鼠标从列表项移到下一个项目上时,一瞬间,前一个项目具有默认的jquery-ui背景(标题中使用的灰色渐变,例如对话框标题栏) .
任何人都有css方便重置自动完成样式？

*更新* 链接到小提琴:

[http://jsfiddle.net/HccBe/][1]

如果将鼠标悬停在其中一个项目上,则会以蓝色突出显示.然后将鼠标移动到它的左侧,但仍然在下拉框中,你会注意到蓝色消失了,但jquery的渐变背景仍然存在.

我在colorbox弹出窗口中加载新表单.在我的表单中,我使用ui-autocomplete了两个字段,但它无法正常工作.当您键入颜色框下方的下拉列表时,它由一个简单的css z-index决定.问题是我不能从这个列表中选择任何项目,无论如何,列表都会消失.自动完成版本为1.10.3,colorbox - 1.3.23.

任何的想法？

我有一个JQuery自动完成搜索框,当在下拉窗口中显示搜索结果时,它会出现在它下面的JQuery下拉菜单后面(见图).我已经尝试增加z-index我在CSS中为自动完成搜索找到的所有内容的值,但它仍然无法解决问题.我还应该尝试什么？

小提琴链接:http://jsfiddle.net/tonyyeb/LKDBh/18/

我编写了一个自定义jquery自动完成功能来显示某些值和文本字段,以便根据以下代码选择值进行更新:

<input type="text" name="promoitem" id="promoitem">

$('#promoitem').autocomplete({
        source: "BckProcesses/GetPromoItems.asp",
        create: function() {
            $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
                return $('<li>')
                .append('<a>' + item.promodesc + '</a>')
                .appendTo(ul);
            }
        },
        select: function(event, ui) {
            $('#promoitem').val(ui.item.promodesc); 
            $('#promocost').val(ui.item.promocost);
            $('#promoqty').val(ui.item.qty);
            $('#hidden_promo_item_id').val(ui.item.id);
        }
    });

这是源文件返回的内容(GetPromoItems.asp)

[{"id": "1", "promodesc": "Ipad 4 ", "promocost": "200", "qty": "1"},{"id": "2", "promodesc": "Village Tickets", "promocost": "20", "qty": "2"}]

但是,当我从ul中选择值时,除promoitem文本字段外,所有内容都会被填充.那些领域变成了空白.

任何人都可以让我知道是什么原因造成的？

谢谢山姆