jQuery用户界面自动完成功能按键和显示问题

Question

我有下面的代码：

function testSearch() { 
    $(".searchfield").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "{{ path('my_search') }}", 
       dataType: "json", 
       data: { 
        term: request.term 
       }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: item.label, 
          value: item.value 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 1, 
     select: function (event, ui) { 
      $.each(ui, function (key, value) { 
       window.location = "{{ path('my_show_product', {'productId': ''}) }}" + "/" + value 

      }); 
     }, 
     focus: function (event, ui) { 
      /* $.each(ui, function(key, value) { 
       alert(key + " " + value); 
      });*/ 
     }, 
    }) 
    $.ui.autocomplete.prototype._renderItem = function (ul, item) { 
     var a = $('<a>', { 
      href: "{{ path('my_show_product', {'productId': ''}) }}" + "/" + item.value, 
      text: item.label 
     }); 

     var $li = $('<li></li>', { 
      style: "width:100%" 
     }); 

     return $li.append(a).data('item.autocomplete', item.value).appendTo(ul); 
    }; 
} 

我的数据是从功能，由$.ajax函数调用返回之上，在此JSON格式：

[ { label: 'test label', value: '1234' }, { label: 'test label1', value: '4567' } ] 

输入栏的样子：

<input type="text" class="searchfield" name="searchfield" value="Search for Products" /> 

到目前为止，我可以搜索项目和g et结果以上述格式显示在前端的列表中。每个项目引用一个页面http://mydomain/products/(value）

目前，我得到以下问题：如果我搜索某物和搜索列表出现，我可以使用我的键盘浏览列表，点击输入按钮并重定向到正确的页面，但是我正在关注的每个项目的完整标签都不会显示在上面显示的输入搜索栏中。

我该如何做到这一点？

编辑： 所以我试图修改代码以下列：

function testSearch() { 
$(".searchfield").autocomplete({ 
source: function(request, response) { 
    $.ajax({ 
     url: "{{ path('my_search') }}", 
     dataType: "json", 
     data: { 
      term: request.term 
     }, 
     success: function(data) { 

      response($.map(data, function(item) { 
       return { 
        label: item.label, 
        value: item.value 
       } 
      })); 
     } 
    }); 
}, 
minLength: 1, 
select: function(event, ui) { 

    $.each(ui, function(key, value) { 
     window.location = "{{ path('my_show_product', {'productId': ''}) }}"+"/" + value 

     }); 
}, 

focus: function(event, ui){ 

    $('.ui-autocomplete-input').val(ui.item.label); 
      $(this).val(ui.item.label); 
    //alert($('#searchfield')[0].className); 
    //alert(ui.item.label); 
    //$(this).val($(ui.item).text()); 
// $('.searchfield').val($(this).val(ui.item.label)); 

    } 

}) 
$.ui.autocomplete.prototype._renderItem = function(ul, item) { 

var a = $('<a>', { 
    href: "{{ path('my_show_product', {'productId': ''}) }}"+"/" + item.value, 
    text: item.label 
}); 

var $li = $('<li></li>', {style:"width:100%"}); 

return $li.append(a).data('item.autocomplete', item).appendTo(ul); 

}; 

} 

，但它似乎是响应决策问题：如果我离开：

response($.map(data, function(item) { 
       return { 
        label: item.label, 
        value: item.value 
       } 
      })); 

比文本字段获得每个标签的“值”，这不是我想要的。如果我将其更改为：

response($.map(data, function(item) { 
       return { 
        label: item.label, 
        value: item.label 
       } 
      })); 

我看到在矿井输入字段中的标签，但链接的每个项目是在结构http://mydomain/(label），而不是http://mydomain/(value）。什么我需要的是后者。

任何想法？

Answer 1

因为您在focus事件中没有做任何事情。

如果您想要特定的内容，那么您可以在focus事件中执行此操作，否则请将其从选项中删除。默认情况下，如果您在选项中未指定focus事件，插件将负责将突出显示的值设置为textbox。

$(".searchfield").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "{{ path('my_search') }}", 
       dataType: "json", 
       data: { 
        term: request.term 
       }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: item.label, 
          value: item.value 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 1, 
     select: function (event, ui) { 
      $.each(ui, function (key, value) { 
       window.location = "{{ path('my_show_product', {'productId': ''}) }}" + "/" + value 

      }); 
     } 
    })