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

时间:2011-07-16 08:28:56

标签: jquery jquery-ui autocomplete jquery-ui-autocomplete

尝试使用类别获取jQuery自动完成功能,将选定的值返回到搜索字段,将值返回到单独的输入字段。

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

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

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

3 个答案:

答案 0 :(得分:27)

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

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

答案 1 :(得分:21)

你很亲密,你只需要:

  1. return false添加到select事件处理程序的末尾,然后
  2. focus事件添加事件处理程序,以便您也可以使用标签而不是值来覆盖它。
  3. 以下是您的代码更新:

    $("#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/

答案 2 :(得分: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);
            }
        });
    });