标签: jquery-ui-autocomplete

自从我从jqueryui 1.8.1切换到1.10.x后,我意识到我的自定义项呈示器不再起作用了:

Uncaught TypeError: Cannot set property '_renderItem' of undefined 

新的jqueryui版本有什么不同？

这是我的代码:

$("#lexicon-search-input")
        .autocomplete({
        ...
        }).data("autocomplete")._renderItem = customItemRenderer;

这是在jqueryui 1.8.1上工作,但在1.10.3上没有.

还有一件事:我使用多个自动填充字段.因此,我不能全局设置它.例如,$ .ui.autocomplete.prototype._renderItem = customRenderItem可以工作,但会影响我的所有自动完成.

我指的是这个插件:http://jqueryui.com/demos/autocomplete/

所以结果的原始结构是

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

我需要让里面的链接看起来像这样:

<a class="myclass" customattribute="something"> The item </a>

请不要告诉我编辑插件的唯一解决方案,因为我不希望网站上所有自动填充的格式相同.

jQuery UI自动完成的一个潜在的简单问题是让我感到困惑.我的来源是

var ac = [
    {
        label: "One Thing",
        value: "One-Thing"
    },
    {
        label: "Two Thing",
        value: "Two-Thing"
    },      
]

我正在调用小部件

$(function() {
    $( "#search" ).autocomplete({
        source: PK.getAutocompleteSource(),
        focus: function( event, ui ) {
            $("#search").val(ui.item.label);
            return false;  
        },
        select: function( event, ui ) {
            $("#search").val(ui.item.label);
            PK.render(ui.item.value);
        }
    });
});

一切正常.当我#search输入输入字段时,匹配标签会显示在下拉列表中,当我select执行正确的搜索时.当我使用箭头键(或鼠标)在下拉列表中选择不同的项目时,小部件甚至会label在#search输入字段中显示.除了,当我按下Enter键时,小部件#search用value而不是填充输入字段label.所以这个领域显示的是One-Thing而不是One Thing.

我怎么能纠正这个？当然,我期待的是更合理的行为,不是吗？

我在jquery ui对话框中使用jquery ui自动完成小部件.当我输入搜索文本时,文本框缩进(ui-autocomplet-loading)但不显示任何建议.

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];

$("#company").autocomplete({        
    source : availableTags ,
minLength: 2
});

company是附加自动完成的文本框的id.

我认为它可能是az索引所以我设置这个:

.ui-autocomplete, .ui-menu, .ui-menu-item {  z-index: 1006; }

但它仍然没有显示.我把自动完成放在一个"常规"页面,它工作正常.

我正在使用jquery ui版本1.8.2.任何想法的想法？

我正在使用jquery ui自动完成,并希望在键盘交互和鼠标交互触发的焦点事件之间进行解密.我该怎么做？

$('input').autocomplete({
    source: function(request, response) {
        ...
    },
    focus: function(event, ui) {
        // If focus triggered by keyboard interaction
            alert('do something');
        // If focus event triggered by mouse interaction
            alert('do something else');
    }
});

谢谢

我在配置JQuery-UI的自动完成模块时遇到了麻烦.我需要当要选择的数据量足够大时会出现滚动条.

这是我试过的:

• 在jquery-ui-1.8.16.css我设置这个:

ui.autocomplete{
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

*如ui-documentation示例中所示

这是我声明和自动完成输入的方式:

$("#myInput").autocomplete({
    source: mySource,
    minLength: 0,
});

我不知道为什么滚动条没有出现,任何帮助将不胜感激.非常感谢你!

我正在尝试使用jQuery UI自动完成功能传递城市和州的额外参数.我一直试图找到一个答案,但似乎找不到适合我的东西.

我目前的代码是:

$(document).ready(function () {
    $("#id_place").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "/autocomplete_place",
                dataType: "json",
                data: {
                    term: request.term,
                    city: $("id_city").val(), 
                    state: $("id_state").val(),
                    test: 4
                },
                success: function(data) {
                    response(data);
                }
            });
        },
    });
});

自动完成功能正常,但它没有将我的城市和州参数传递给该功能.如果我输入v它请求URL:/autocomplete_place?term=v&test=4

我猜测它对val()城市和州的评估(document).ready()并获得这些表格字段的空白值？我认为将源代码转换为ajax函数可以解决这个问题,但也许不会.

有任何想法吗？

我试图让jQueryUI AutoComplete触发动态创建的表单输入元素,但它不起作用.我已尝试将keyup.autocomplete和keydown.autocomplete用作$ .live()中的绑定事件,但它绑定到新元素 - 仅限于页面上已有的元素.

在这里尝试代码(尝试在第一个输入中键入"ava",然后单击"添加输入"并在新输入中键入相同的内容).

JavaScript的:

$(function() {
    $("input#addButton").click(function() {
        $("input.searchInput:last").clone(true).appendTo($(this).closest("form"));
        $("input.searchInput:last").val("");

    })

    $("input.searchInput").live("keydown.autocomplete", function() {
        $(this).autocomplete({
            source: [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
                ],

            minLength: 2
        });
    })
});

HTML:

<form name="myForm" method="post">
    <input id="addButton" name="addButton" type="button" value="Add an input" />
    <input name="search" value="" class="searchInput" maxlength="20" />
</form>

我正在将自动填充功能添加到文本框中.引用这个 jQuery自动完成自定义数据插件.

没有自定义数据代码,它工作正常.我添加了以下自定义数据代码

 .autocomplete( "instance" )._renderItem = function( ul, item ) {
                        return $( "<li>" )
                          .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                          .appendTo( ul );
                      };

它会抛出错误

自动完成小部件实例没有这样的方法'实例'

有什么我想念的吗？

我正在使用jQuery v1.11.2和jQuery UI - v1.10.3

这个答案 - jQueryUI:我如何自定义格式化Autocomplete插件结果？ - 描述如何对jqueryUI自动完成小部件进行monkeypatch,以便以特定方式显示内容.它使用的方法是替换上的函数$.ui.autocomplete.prototype.

这意味着所有自动完成小部件都将获得此修补程序.

有没有办法只为一个输入元素修补自动完成小部件？它是什么？

当我检查时$('$input').autocomplete,我没有看到任何自动完成文件(_renderItem,_renderMenu,_search等).