标签: jquery-ui-autocomplete

我有一个大型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自动完成.

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

我正在使用jQuery自动完成并且它工作正常,现在我想在发生以下情况时从jQuery在会话中存储变量.

当有人输入任何单词jQuery显示建议下拉列表时,如果有人从该建议下拉列表中选择一个项目.

我想捕获上面的点并在会话中存储变量.

我搜索了Google,StackOverflow但没有找到相关的解决方案.我的自动填充代码如下:

  $(".autosearch-smart").autocomplete('Home/GetCompanyNames', {
    minChars: 1,
    width: 402,
    matchContains: "word",
    autoFill: true
});

这就是我试图做的事情:

  $(".autosearch-smart").autocomplete('Home/GetCompanyNames', {
    minChars: 1,
    width: 402,
    matchContains: "word",
    autoFill: true,
    select: function (a, b) {
        alert("selected");
    }

});

编辑:选择事件处理程序也无法正常工作

我在C#中使用asp.net MVC3.请帮助我,并提前感谢.

在jquery对话框中,我想使用jqueryUI的jquery自动完成功能.

然后我在我的Controller(我正在使用ASP.NET MVC2)中准备了一个动作,如下所示

public ActionResult GetForos(string startsWith, int pageSize)
{
    // get records from underlying store
    int totalCount = 0;
    string whereClause = "Foro Like '" + startsWith + "%'";
    List<Foro> allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount);

    //transform records in form of Json data
    List<ForoModelWS> foros = new List<ForoModelWS>();
    foreach ( Foro f in allForos)
        foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId), 
            text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name });

    return Json(foros);
} …

我想在输入的onclick事件中触发搜索,但仅当搜索窗口尚未打开时才会触发.目前,我这样做:

$(this).bind('click.ajaxselect', function(e) {
    if(!$(this).autocomplete('widget').is(':visible')) {
        $(this).autocomplete('search','');
    }
});

但我并不是太喜欢使用:visible选择器,因为它也会搜索所有父母.我可以查看一些房产吗？

Dialog有这个isOpen方法,自动完成有类似的东西吗？

我正在使用jquery ui autocomplete组合框,它工作得很好,但现在我有点贪心了.我希望能够为其添加类别.组合框是从菜单生成的,所以如果我添加了类别,请参阅下面的示例,标签将显示类似于jquery ui自动完成类别版本中的类别

<select>
<optgroup name="Cat 1">    
<option value="1a">One A</option>
<option value="1b">One B</option>
<option value="1c">One C</option>
</optgroup>
<optgroup name="Cat 2">    
<option value="2a">Two A</option>
<option value="2b">Two B</option>
<option value="2c">Two C</option>
</optgroup>
</select>

我创造了一个 http://jsfiddle.net/nH3b6/11/.

感谢您的帮助或指导.

我正在尝试设置我的Jquery UI自动完成字段以获取来自ajax连接的数据.到目前为止,这是我的代码:

            $("#mainIngredientAutoComplete").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "../api/IngredientChoices",
                        dataType: "json",
                        success: function (data) {
                            response(function (item) {
                                return {
                                    label: item.MainName,
                                    value: item.MainItemID
                                }
                            });
                        }
                    });
                }
            });

这是我的JSON:

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]

HTML:

<table id="tbl_ingredients" style="padding:0px;">
                <tr id="ingHeader">
                    <td>Ingredient</td>
                    <td>Measurement</td>
                    <td>Amount</td>
                    <td><input id="mainIngredientAutoComplete" /></td>
                    <td></td>
                </tr>
</table>

当我开始输入"mil"(用于牛奶)时,我的代码给了我这个错误:

编辑:

我做了一些改变,但有一些尝试,但现在我得到了一个新的错误 -

[URL]第55行第25行未处理的异常

0x800a1391 - Microsoft JScript运行时错误:'data'未定义

        $("#mainIngredientAutoComplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "../api/IngredientChoices",
                    dataType: "json",
                    response: ($.map(data, function(v,i){
                        return {
                            label: v.MainName,
                            value: v.MainItemID

                        }})) …

我无法得到jquery自动完成的结果显示,虽然php代码返回json结果.jquery代码如下:

$("#newName").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: root + "/assets/php/autocomplete.php",
            dataType: "json",
            data: {
                term : request.term,
                field : "name"
            },
            success: function(data) {
                response(data);
            }
        });
    });

php代码是:

while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $row_array['value'] = $row[$field];
    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

在Firebug中查看结果时,我收到如下响应:

[{ "值": "jdoe的"}]

但是,我从未在html页面中看到显示的建议列表.有关问题的任何建议.

谢谢,AB

我有一个jQueryUI自动完成,驻留在一个对话框中.对于某些旧版本的jQuery/jQueryUI,它显示返回值列表,而对于最新版本则不显示.此外,我已经在一个页面上正常工作,即使使用新版本的jQuery/jQueryUI,其他一些东西仍在进行,这似乎并不好看.显然,我有一些不同的东西,但我似乎无法确定它是什么.我知道我可以使用css来改变z-index,但这看起来几乎有点hackish.

请参阅以下两个实例.

http://jsbin.com/uciriq/3/(使用jQuery 1.4.3和jQueryUI 1.8.4)

http://jsbin.com/uciriq/2/(使用jQuery 1.9.1和jQueryUI 1.10.3)

如图所示(或更适用的声明"未见"),jQuery 1.9.1/jQueryUI 1.10.3的返回自动完成匹配显示在对话框后面.

允许返回的自动完成匹配可见的最佳解决方案是什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>autocomplete with dialog</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
        <!--
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js" type="text/javascript"></script>
        -->

        <script type="text/javascript">
            $(function() {
                $( "#search" ).autocomplete({
                    source: [ "one", "two", "three" ]
                });
                $("#dialog").dialog();
            });
        </script>

    </head>
    <body>
        <div id="dialog" class="dialog" title="Testing"> …

我遇到了jQuery Autocomplete插件的问题.

通过使用术语"项目"多次搜索,首先它可以正常工作:鼠标悬停的css类很好地添加,一切都很顺利.通过单击弹出窗口外部关闭它并在每次所有内容似乎工作较慢时再次键入:

我在Chrome上进行了测试,这种速度非常慢,在Firefox上似乎处理得更好但性能也有所下降.

这是一个非常简单的代码:https: //jsfiddle.net/re9psbxy/1/

和代码:

var suggestionList = [];
for (var i = 0; i < 200; i++) {
  suggestionList.push({
    label: 'item' + i,
    value: i
  });
}

//initialize jQueryUI Autocomplete
jQuery('#autocomplete').autocomplete({
  source: suggestionList
});

HTML:

<input type="text" id="autocomplete"/>