标签: jquery-ui-autocomplete

我试图找到一个twitter bootstrap typeahead元素的工作示例,该元素将进行ajax调用以填充它的下拉列表.

我有一个现有的工作jquery自动完成示例,它定义了ajax url以及如何处理回复

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

我需要更改什么来将其转换为typeahead示例？

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

我将等待" 添加远程源支持预先输入 "问题得到解决.

我正在使用jQuery UI Autocomplete插件.有没有办法在下拉结果中突出显示搜索字符序列？

例如,如果我将"foo bar"作为数据并输入"foo",我将在下拉列表中显示" foo bar",如下所示:

我正在使用jQuery UI Autocomplete.

 $("#task").autocomplete({
     max:10,
     minLength:3,
     source: myarray
 });          

max参数不起作用,我仍然得到超过10个结果.我错过了什么吗？

我正在开发一个表单,并使用jQuery UI Autocomplete.当用户选择一个选项时,我希望选择弹出一个附加到父<p>标签的范围.然后我希望字段清除而不是填充选择.

我的跨度看起来很好,但是我无法清除这个领域.

如何取消jQuery UI Autocomplete的默认选择操作？

这是我的代码:

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

简单地做$(this).val("");就行不通.令人抓狂的是,如果忽略自动完成功能,几乎所有功能都能正常工作,只需在用户输入逗号时执行操作:

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

真正的最终结果是使自动完成功能可以进行多项选择.如果有人对此有任何建议,欢迎他们.

我添加了两个jQuery UI Dropdown Autocomplete脚本.现在我希望获得第二个下拉列表的值,并希望单独存储在变量中.怎么可能？

任何想法或建议？谢谢.

我的小提琴: 样品

我的JS代码:

(function($) {
            $.widget("ui.combobox", {
                _create: function() {
                    var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? selected.text() : "";
                    var input = this.input = $("<input>").insertAfter(select).val(value).autocomplete({
                        delay: 0,
                        minLength: 0,
                        source: function(request, response) {
                            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                            response(select.children("option").map(function() {
                                var text = $(this).text();
                                if (this.value && (!request.term || matcher.test(text)))
                                    return {
                                    label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                    value: text,
                                    option: this
                                }; …

在你指出我之前,是的,我已经回顾了关于这个主题的六个帖子,但我仍然因为这不起作用而受到阻碍.

我的目标是检测自动完成何时产生0结果.这是代码:

 $.ajax({
   url:'sample_list.foo2',
   type: 'get',
   success: function(data, textStatus, XMLHttpRequest) {
      var suggestions=data.split(",");

  $("#entitySearch").autocomplete({ 
    source: suggestions,
    minLength: 3,
    select: function(e, ui) {  
     entityAdd(ui.item.value);
     },
    open: function(e, ui) { 
     console.log($(".ui-autocomplete li").size());
     },
    search: function(e,ui) {
     console.log("search returned: " + $(".ui-autocomplete li").size());

    },
    close: function(e,ui) {  
     console.log("on close" +  $(".ui-autocomplete li").size());    
     $("#entitySearch").val("");
    }
   }); 

  $("#entitySearch").autocomplete("result", function(event, data) {

   if (!data) { alert('nothing found!'); }

  })
 }
}); 

搜索本身工作正常,我可以得到没有问题的结果.据我了解,我应该能够使用自动完成("结果")处理程序拦截结果.在这种情况下,它根本不会发射.(即使是不引用结果数量的通用警报或console.log也不会触发).open事件处理程序显示正确的结果数(当有结果时),search和close事件处理程序报告结果总是落后一步.

我觉得我错过了一些显而易见的东西,但我只是看不到它.

我有麻烦试图让自动完成工作正常.

这一切看起来都不错,但......

<script>
$(function () {
    $("#customer-search").autocomplete({
        source: 'Customer/GetCustomerByName',
        minLength: 3,
        select: function (event, ui) {
            $("#customer-search").val(ui.item.label);
            $("#selected-customer").val(ui.item.label);
        }
    });
});
</script>
<div>
<input id="customer-search" />
 </div>
@Html.Hidden("selected-customer")

但是,当我从下拉列表中选择一个项目时,该值已应用于文本框而不是标签.

我做错了什么？

如果我使用firebug查看源代码,我可以看到我的隐藏字段正在正确更新.

在jQuery UI 1.8.4 之前,我可以在我构建的JSON数组中使用HTML来处理自动完成.

我能做的事情如下:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

这将在下拉列表中显示为红色文本.

从1.8.4开始不起作用.我发现http://dev.jqueryui.com/ticket/5275告诉我在这里使用我没有运气的自定义HTML示例.

如何让HTML显示在建议中？

我的jQuery是:

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

我的JSON数组包含如下HTML:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

我需要一些JQuery UI Autocomplete的帮助.我希望我的textfield(.suggest-user)显示来自AJAX请求的名称.这就是我所拥有的:

jQuery("input.suggest-user").autocomplete({
    source : function(request, response) {
        var name = jQuery("input.suggest-user").val();
        jQuery.get("usernames.action?query=" + name, function(data) {
            console.log(data);  // Ok, I get the data. Data looks like that:
            test = data;        // ["one@abc.de", "onf@abc.de","ong@abc.de"]
            return test;        // But what now? How do I display my data?
        });
    },
    minLength : 3
});

很感谢任何形式的帮助.

我已经实现了一个jQuery UI Autocomplete框,而不是文本框的宽度,下拉选项正在扩展以填充页面的剩余宽度.

看看这个例子,亲自看看:http://jsbin.com/ojoxa4

我已经尝试在创建后立即设置列表的宽度,如下所示:

$('.ui-autocomplete:last').css('width',
                               $('#currentControlID').width()
                              );

这似乎什么都不做.

我也尝试使用页面样式设置宽度:

ui-autocomplete { width: 500px; }

令人惊讶的是,这会起作用,但这意味着页面上的所有自动填充必须具有相同的宽度,这并不理想.

有没有办法单独设置每个菜单的宽度？或者更好,任何人都可以解释为什么宽度不适合我？