标签: jquery-ui-autocomplete

我在jQuery UI 1.8rc3中有新的自动完成小部件在Firefox中运行良好.它在IE中根本不起作用.有人可以帮我吗？

HTML:

<input type="text" id="ctrSearch" size="30">
<input type="hidden" id="ctrId">

使用Javascript:

$("#ctrSearch").autocomplete({
    source: "ctrSearch.do",
    minLength: 3,
    focus: function(event, ui){
        $('#ctrSearch').val(ui.item.ctrLastName + ", " + ui.item.ctrFirstName);
        return false;
    },
    select: function(event, ui){
        $('#ctrId').val(ui.item.ctrId);
        return false;
    }
});

结果(IE 8):

红色框是<ul>jQuery创建的元素.

http://i40.tinypic.com/6q9quu.jpg

我也得到这个错误:

Line: 116
Error: Invalid argument.

当我在IE8脚本调试器中打开它时,它突出显示f[b]=d在jquery.min.js的第116行.请注意,我正在使用托管在Google服务器上的jQuery版本1.4.2(https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js).

我已经尝试删除一些选项,但即使我.autocomplete()没有选项调用,或只使用源选项,我仍然得到相同的结果.

它再一次在Firefox中运行,但在IE中却没有.有什么建议？

谢谢.

更新: 正如所建议的,我使用了jquery.js(而不是jquery.min.js)并在第4618行得到了错误.请参阅下面的jitter答案.请参阅几天前发布的其他Stack Overflow问题.

更新2: 我发现jQuery UI自动完成使用无效属性this.element.height,应该使用该函数this.element.height()

我正在使用 jQuery 自动完成功能，无论我更改什么设置，我都无法让它在下拉列表中显示 10 个以上的结果。我可以在返回的结果中看到我从服务器获取所有这些，但前端不会显示超过 10 个。

$("#add_cpt_code_text").autocomplete('<%: Url.Action("SearchCPT", "ChargeCapture") %>', {
    autoFill: false,
    mustMatch: true,
    matchContains: true,
    cacheLength: 1,
    maxItemsToShow: 15,
    minChars: 3,
    extraParams: {
        LocationID: 0
    },
    formatItem: function (data, index, max) {
        return data[1];
    },
    formatMatch: function (data, index, max) {
        return data[1];
    },
    formatResult: function (data, index, max) {
        return data[1];
    }
}).result(function (event, data, formatted) {
    if (data) {
        $("#add_cpt_code_id").val(data[0]);
        $("#add_cpt_code_text").val(data[1]);
    }
    else {
        $("#add_cpt_code_id").val('');
    }
});

我正在尝试学习Django,遵循旧Django书中的教程,我目前仍然坚持在我的应用程序中为单个字段实现jquery ui自动完成.我在这个问题上做了很多搜索只是为了让自己更加困惑.所以这是有问题的代码.

urls.py

  `(r'^ajax/tag/autocomplete/$', ajax_tag_autocomplete),`

tag_autocomplete.js

$(document).ready(function () {
    $("#id_tags").autocomplete({
        source: "/ajax/tag/autocomplete/",
    });
});

views.py

def ajax_tag_autocomplete(request):
    if 'term' in request.GET:
        tags = Tag.objects.filter(
            name__istartswith=request.GET['term']
        )[:10]
        return HttpResponse(u'\n'.join(tag.name for tag in tags))
    return HttpResponse()

因此,当我浏览我的应用程序并开始在此标记字段中键入字符时,我没有显示任何内容,也没有显示任何列表.然而,firebug告诉我代码正在执行查询并且它返回正确的结果.我错过了什么简单的事情？

任何人都知道使用 jQuery UI 的自动完成小部件的良好示例代码，该小部件可以在文本框中间自动完成单词，而不仅仅是在末尾自动完成单词？

我正在将 jquery UI 自动完成小部件用于支持输入多个标签的组件。这就像堆栈溢出的标签编辑器，但更简单：自动完成下拉菜单中没有花哨的格式，编辑框中没有“标签”背景图像。我从jQuery UI Autocomplete Multiple 示例开始并对其进行了修改。

它工作正常，除了自动完成对多标签字符串中间的标签不起作用。例如，如果我键入C Fortran然后在后面加上插入符号C并键入+，我希望C++在自动完成列表中看到，但我又看到Fortran了。

这是到目前为止的代码：http : //jsfiddle.net/WCfyB/4/

这与autocomplete in middle of text (如 Google Plus)所描述的问题相同，但该问题中的问题更简单，因为他可以依靠@文本中的空白来指示何时显示自动完成。就我而言，我不能仅仅依赖于文本——我实际上需要找出插入符号的位置并自动完成插入符号所在的单词。

我可以使用 caret 或其他插件自己构建它，但想知道是否已经有一个基于 jQuery-UI 的在线示例，我可以使用它而无需重新发明另一个轮子，特别是如果需要担心特定于浏览器的极端情况。理想情况下，它的行为是这样的：每当用户将插入符号放在标签内部或末尾（标签总是用 1+ 空格分隔）时，就会为该标签显示自动完成。知道一个好的样本吗？

我有一个输入字段和一个隐藏的div.输入是只读的.当用户单击输入时,使用JQuery UI自动完成建议项目列表.我想要和不想实现的是当用户从列表中选择一个项目时触发一个事件(删除隐藏的类).希望有人能提供帮助.提前感谢您的回复.干杯.渣.

http://jsfiddle.net/fdBHC/1/

我的HTML:

<input id="conditions" type="text" readonly="readonly" /input>
<div id="test" class="hidden">some text</div>?

我的css:

input{
    margin:50px;
    border:1px solid black;}

div{
    width:200px
    height:200px;
    background-color:orange;}

.hidden{
    display:none;}

我的js:

$(function() {
    var availableTags = [
            "aucune","Prise de contact préalable nécessaire"
        ];
    $("#conditions").autocomplete({
        source: availableTags,
        minLength: 0
    }).click(function() {
        $(this).val("");
        $(this).autocomplete("search");
    });
});?

我一直试图在文本区域添加类似Facebook @tagged Friend name的内容.我一直在使用jquery ui auto-complete来完成这项工作,它工作得很好,除了我想要一些符号如@或〜来启动标签,我无法弄清楚如何.有人有想法吗？我正在像Facebook一样将它用于多个朋友标签.

我正在尝试从 json 中提取一些数据并使用 jquery 自动完成功能显示它们。

json 数组包含 ID、标题、日期。在显示屏上，我想显示标题和日期，单击时我想解析该标题的特定 ID。

所以目前我有：

$("input").autocomplete({
      source: function (d, e) {
          $.ajax({
              type: 'GET',
              url: url + mode + encodeURIComponent(d.term) + key,
              dataType: "jsonp",
              success: function (b) {
                  var c = [];
                  $.each(b.results, function (i, a, k) {
                    c.push(a.title + " " + a.date) // Displays Title and Date
                  });
                  e(c)
              }
          })
      },
      select: function (a, b) {
          console.log(b);
            // Appends an array with 2 keys: Value and Label. 
            // Both display the title …

我正在尝试为jQuery插件标签添加一些功能- 它基于自动完成:

a)我尝试过滤我的JSON数据以仅显示标记的名称.

返回的JSON示例/repo/json:

[{id:1, name:"0.8-alpha-1", category:"version"}, {id:2, name:"0.8-alpha-2", category:"version"}, {id:3, name:"0.8-alpha-3", category:"version"}, {id:4, name:"0.8-alpha-4", category:"version"}, {id:5, name:"0.8-alpha-1", category:"version"}, {id:6, name:"0.8-alpha-2", category:"version"}, {id:7, name:"0.8-alpha-3", category:"version"}, {id:8, name:"0.8-alpha-4", category:"version"}]

b)我想在用户提交数据时提交标签的id,而不是名称.

c)我尝试在我的tag-it输入字段中添加一些约束:用户无法验证不在我返回的JSON中的标记/repo/json call.

我不想fork tag-it存储库,似乎可以测试用户数组和搜索beforeTagAdded选项之间的交集.

我此时尝试没有成功,因为我不知道在哪里可以找到实现交集的标签列表.

我的js代码:

 $(function(){
    $("#singleFieldTags").tagit({
      tagSource: function(search, showChoices) {
        $.ajax({
          url: "/repo/json",
          dataType:   "json",
          data: {q: search.term},
          success: function(choices) {
            showChoices(choices);
          }
        })},
           beforeTagAdded: function(event, ui) {
           //if ($.inArray(ui.tagLabel, search) == -1) {
           //   $("#singleFieldTags").tagit("removeTagByLabel", ui.tagLabel);
           // } …

正如您在http://jsfiddle.net/hn838/4/中看到的那样,'click'对于autofiller工作正常,但我想在输入密钥按键上触发相同的代码,但它对我不起作用.我的代码在这里.点击:

$('.ui-autocomplete').on('click', '.ui-menu-item', function(){
    $('.college').trigger('click');
});

键盘:

 $('.ui-autocomplete').on('keypress', '.ui-menu-item', function(e){
            if (e.which == 13) {
                         e.preventDefault();
            $('.college').trigger('click');
           }
        });

我想要 $('.college').trigger('click');执行click并进入keypress.点击工作正常,但按键不工作.任何线索？

我正在使用jQuery UI的自动完成功能,而且我遇到了问题,我无法弄清楚如何修复.

问题是,当建议太长时,它们会自动换行以占用多行.我想让建议窗口扩展到最大大小而不显示溢出.问题是我希望建议只显示在一行中.我不想为建议框设置固定宽度.如果建议的长度更短,那么我的最大宽度我希望jQuery UI设置适当的宽度.