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 

      }); 
     } 
    })