【问题标题】:Jquery Auto Complete Does Not AppendJquery 自动完成不追加
【发布时间】:2014-03-10 04:58:42
【问题描述】:

Jquery 新手在这里。 我的 jquery 追加似乎没有工作。 非常感谢任何帮助。

我正在使用 jquery 版本 1.8.3 和 UI 1.9.2。

下面是我的代码。

$('.tinputer').autocomplete({
        source: "http://localhost/myapp/items/search_item",
        minLength: 1,
        select: function(event, ui) {
            var $itemrow = $(this).closest('tr');
            $itemrow.find('#item_description').val(ui.item.description);
            $itemrow.find('#unit_price').val(ui.item.price);
            $itemrow.find('#qty').focus();
            verify_item(ui.item.value);
        }
    }).data("autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" +  item.value + item.description + "</a>" )
        .appendTo( ul );
    };

小提琴 - http://jsfiddle.net/Yw2Y7/1/ 尝试在第二行的项目框中输入。第一行有效。

结果被填充,我得到了下拉菜单,但只显示了值。 item.description 没有附加,或者似乎附加部分被完全忽略了。

非常感谢您的帮助。

【问题讨论】:

  • 这一行的值是多少:$itemrow.find('#item_description').val(ui.item.description);您确定 item_description 正在返回值。你能做一个jsfiddle什么的吗
  • 它正在查找最接近自动完成元素的表格行中名为“item_description”的元素,并尝试在从自动完成下拉列表中选择一个值时添加一个值。在 select 上运行的代码运行良好,没有任何问题。
  • 小提琴:jsfiddle.net/Yw2Y7/1
  • @你必须添加 .each 函数。检查我的答案。

标签: javascript jquery jquery-ui jquery-plugins jquery-autocomplete


【解决方案1】:
$('.tinputer').autocomplete({
source: projects,
minLength: 1,
select: function (event, ui) {
    var $itemrow = $(this).closest('tr');
    $itemrow.find('#item_description').val(ui.item.description);
    $itemrow.find('#unit_price').val(ui.item.price);
    $itemrow.find('#qty').focus();
    verify_item(ui.item.value);
}
}).

each(function(){               //This is the line added.


$(this).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a>" + item.value + " - " + item.description + "</a>")
    .appendTo(ul);
} }           
 );

演示 http://jsfiddle.net/skhan/Yw2Y7/3/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-01
    • 1970-01-01
    • 2020-07-07
    • 2012-06-23
    • 1970-01-01
    相关资源
    最近更新 更多