jQuery 自动完成类别选择标签和值

Question

尝试获取带有类别的 jQuery 自动完成功能，以将所选值返回到搜索字段，并将该值返回到单独的输入字段。

我已修改数据以具有值以及标签和类别。

请参阅 http://jsfiddle.net/chrisk/bM7ck/

但值始终返回到搜索字段而不是标签。

Answer 1

这就是当您提供标签和值时 jquery ui 自动完成的工作原理。如果您希望标签返回到搜索字段，请重命名值字段。

更新的小提琴： http://jsfiddle.net/jensbits/bM7ck/3/

Answer 2

您已经很接近了，您只需要：

1. 将 return false 添加到 select 事件处理程序的末尾，并
2. 为 focus 添加事件处理程序> 事件，以便您也可以使用标签而不是值来覆盖该事件。

这是更新的代码：

$("#search").catcomplete({
    delay: 0,
    source: data,
    select: function(event, ui) {
        $('#search').val(ui.item.label);
        $('#searchval').val(ui.item.value);
        return false; // Prevent the widget from inserting the value.
    },
    focus: function(event, ui) {
        $("#search").val(ui.item.label);
        return false; // Prevent the widget from inserting the value.
    }
});

这是更新的示例： http://jsfiddle.net/q2kDU/

Answer 3

$(function() {
        $( "#searchitems" ).autocomplete({
            source: [<?php echo $search /*example for full list in php*/?>],
            minLength: 2,
            select: function(event, ui) {
                event.preventDefault();
                $("#searchitems").val(ui.item.label);
                $('#searchitemvalue').val(ui.item.value);
                window.location="#"; //location to go when you select an item
            },
            focus: function(event, ui) {
                event.preventDefault();
                $("#searchitems").val(ui.item.label);
                $('#searchitemsvalue').val(ui.item.value);
            }
        });
    });