标签: jquery-ui-autocomplete

我使用jQuery UI的自动完成程序与创建它的方式略有不同.

基本上我想保留所有相同的功能,唯一的区别是当出现建议框时,我不会在用户进行选择时隐藏建议框,我也不希望该选择填充输入框.autocomplete附加到.

所以,我一直在阅读jQuery UI文档,看来有一种方法可以禁用Select:和Close:事件,但我发现他们解释它的方式非常混乱,因此,这就是为什么我我在这里寻求帮助.

我的jQuery

$( "#comment" ).autocomplete({
    source: "comments.php",
    minLength: 4,

    // Attempt to remove click/select functionality - may be a better way to do this        
    select: function( event, ui ) {
        return false;
    },
    // Attempt to add custom Class to the open Suggestion box - may be a better way
    open : function (event, ui) {
        $(this).addClass("suggestion-box");
    },
    // Attempt to cancel the Close event, so when someone makes a selection, the box does not close …

我有一个jQuery UI Autocomplete工作正常,如果返回的json对象如下所示:

label:name
value:name

然后它搜索myname,当用户选择一个时,它会用myname填充输入框.

但我想要的是json对象看起来像这样:

label:name
value:id

当我这样做时,自动完成功能使用id号而不是名称字符串填充输入框.

如何让自动完成功能将显示的文本设置为名称,并将隐藏值设置为值？

在官方文档中我没有看到任何方法.

这是我的自动完成功能:

$("#eventAccount").autocomplete({
        minLength: 2,
        source: function (request, response) {
            var term = request.term;
            if (term in cache) {
                response(cache[term]);
                return;
            }

            request.e = "getMyAccountAutocomplete";

            $.getJSON("/admin/ajaxController.php", request, function (data, status, xhr) {
                cache[term] = data;
                response(data);
            });
        }
    });

而它正在回归的JSON:

[{"label":"My fancy name","value":"229"}]

我这里有小提琴

如果选择了choice1单选按钮,我需要availabletags1作为源,如果选择了choice2单选按钮,我需要availabletags2.我需要通过实际用户选择动态地更改它.

码:

 var availableTags1 = [
"ActionScript",
"AppleScript",
"Asp"
];

var availableTags2 = [
"Python",
"Ruby",
"Scala",
"Scheme"
];

$( "#autocomplete" ).autocomplete({
source: availableTags1
});

$('input[name="choice"]').click(function(){
if(this.checked){
    if(this.value == "1"){
        $( "#autocomplete" ).autocomplete('option', 'source', availableTags1)
    } else {
        $( "#autocomplete" ).autocomplete('option', 'source', availableTags2)
    }

我正在尝试防止在选择时发生模糊:在自动完成中调用.(选择:在自动完成的建议框中单击项目时调用)但是,无意中,当我从建议框中选择项目时会调用模糊.我该如何解决这个问题？

这是我的代码基本排列的方式.

$("#input_field").autocomplete({
    source: "source.php",
    select: function( event, ui ) { alert("Item selected! Let's not trigger blur!"); }
}).blur(function(event) {
    alert("Alert if the user clicked outside the input, pressed enter, or tab button.");
    alert("But not from the item selection! :S");
});

谢谢!

编辑:这是一个简短的背景.我试图允许用户搜索/选择项目或创建新项目,如果用户模糊输入.

我正在开发一个jQueryMobile应用程序,其中包含一些需要自动完成功能的表单字段.我正在使用jQueryUi自动完成插件,但无法让它正常工作.如果我的表单是浏览器中加载的初始页面,但如果稍后通过jQueryMobile ajax加载机制加载表单,则它无法正常工作.

我正在使用的版本是:
jQueryMobile:1.0a4.1
jQueryUi:1.8.9
jQuery:1.4.4

我的自动完成功能如下所示:

$(function () {
    $('#search').autocomplete({
        source: '/Autocomplete/SearchAutoComplete',
        minLength: 3,
        select: function (event, ui) { }
    });
});

我的想法是,这需要连接到当前活动页面,但我不知道如何做到这一点.有人能让我知道如何做到这一点？

另外,我不依赖于jQueryUi自动完成解决方案.如果有更好的方法,请告诉我.

谢谢,
格雷格

http://jqueryui.com/demos/autocomplete/#event-change

听起来change事件应该在您选择一个项目后触发,但它似乎触发onb​​lur,但仅在输入已更改时才会触发.

select OTOH过早触发,在输入文本更新之前触发.

我想在用户选择项目后立即对输入执行某些操作,或者在用户键入内容并切换焦点后(例如通常的更改事件).

我怎样才能做到这一点？

下面是我尝试appendTo使用AJAX源代码处理jQuery自动完成功能.

我有多个问题,希望能够帮助许多其他正在努力理解使用和AJAX源实现自动完成的正确方法的人.

1)source: function(request, response) {...} 这是做什么的？为什么需要它.

2)function(data){ response($.map (data, function(obj) {返回数据的格式是什么？我意识到数据是JSON格式的,但有什么意义.map呢？有必要这样做吗？有好处吗？

图3a)当使用appendTo和renderItem,是有必要具有上述success数据返回？

3b)或者,根据上面的数据,你如何正确使用appendTo和renderItem来改变你检索值的格式和显示？

$(function() {
$( ".find_group_ac" ).autocomplete({
        minLength: 1,
        source: function(request, response) {
            $.ajax({
                url: "welcome/search/",
                data: { term: $(".find_group_ac").val()},
                dataType: "json",
                type: "POST",
                success: function(data){ response($.map
                        (data, function(obj) {
                            return {
                            label: obj.name + ': ' + obj.description,
                            value: obj.name,
                            id: obj.name
                };}));}
            });
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) { …

我有一个" 模态窗口中通过向一个获得网页" divCSS属性position来fixed.该div包含输入字段.特别是,我使用的是自动完成构件从jQueryUI的.有两个主要问题:

1)第一个是,由于div具有固定位置,当您向下滚动网页时,自动填充建议不会显示为固定,而是随页面一起上下移动.您可以在此Codepen中看到该问题,我在jQuery网站上使用了城市名称自动完成的示例.

2)第二个问题是自动完成的建议显示在页面的左上角而不是输入字段的下方.不幸的是,我试图在Codepen中重现这个问题,但我不能.

我很确定问题是由CSS引起的,特别是由JQuery-UI提供的这种样式属性.也许可以通过使用自动完成小部件的位置选项来解决问题.

我应该定义什么CSS属性以及如何定义？

PS:我使用http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css上提供的主题.

我有一个大型HTML表单,其中包含许多需要帐户自动填充的字段.我使用AccountLookup类标记这些字段,jQuery为自动完成执行脏工作:

$(".AccountLookup").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "Lookup.asmx/GetAccounts",
            data: "{ 'Search': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item.Value
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 3
});

现在,当用户从自动填充中选择某些内容时,我需要它在填充标记的输入字段之前填充隐藏字段; 可能使用类似的东西:

$(this).prev().val(item.Key);

如何合并此功能？另外,如何强制用户从自动完成中进行选择？(所有值都是预定义的,用户无法添加新值.)

编辑: 据我所知,从检查DOM,选择选项目前填写隐藏的表单字段.

select: function (event, ui) {
    $(this).prev().val(ui.item.key);
}

我想我已经阅读了有关此问题的每个stackoverflow和google结果,他们似乎都引用了第一个jquery自动完成插件而不是当前的jquery ui自动完成.

强制自动完成结果从数据源而不是缓存列表更新的方法是什么？