如何修改这个 JQuery 函数

Question

I'm using jquery.autocomplete to display search suggestions.我正在使用 jquery.autocomplete 来显示搜索建议。 Right now the function takes the value and insert it behind "/collections/".现在该函数获取该值并将其插入到“/collections/”后面。

I like to give each tag a custom url.我喜欢给每个标签一个自定义 url。 If anyone could show me how to do implement this would be awesome.如果有人能告诉我如何实现，那就太棒了。

 $(function(){ var tags = [ { value: 'product1' }, { value: 'product2' }, { value: 'product3' }, { value: 'product4' } ]; $('#autocomplete1').autocomplete({ lookup: tags, lookupFilter: function (suggestion, originalQuery, queryLowerCase) { return suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0; }, onSelect: function (suggestion) { document.location.href = "/collections/" + $(this).val() } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.js"></script> <form method="get" id="searchbar" action="/search"> <button type="submit" value="Search"> <span class="icon-search"></span> </button> <input type="text" name="q" autocomplete="off" id="autocomplete1" placeholder="Search"/> </form>

So something like this:所以像这样：

$(function(){
  var tags = [      
    { value: 'product1', url: '/collections/product1' },
    { value: 'product2', url: '/collections/product2b' },
    { value: 'product3', url: '/collections/product3a' },
    { value: 'product4', url: '/collections/product4b' }, 
  ];

Answer 1

For this you can use the ui.item.{parameter} , so in your case, ui.item.url为此，您可以使用ui.item.{parameter} ，因此在您的情况下， ui.item.url

in this instance when you click on a value from the autocomplete the ui.item is set to:在这种情况下，当您单击自动完成中的值时， ui.item设置为：

[object Object] {
  label: "product1",
  url: "/collections/product1",
  value: "product1"
}

which you can then easily select the url and point the document location然后您可以轻松选择网址并指向文档位置

 $(function() { var availableTags = [ { url: '/collections/product1', value: 'product1' }, { url: '/collections/product2b', value: 'product2' }, { url: '/collections/product3a', value: 'product3' }, { url: '/collections/product4b', value: 'product4' } ]; $( "#autocomplete1" ).autocomplete({ source: availableTags, select: function (event, ui) { document.location.href = ui.item.url; } }); });

 <!DOCTYPE html> <html> <head> <link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input type="text" name="q" autocomplete="off" id="autocomplete1" placeholder="Search"/> </div> </body> </html>

如何修改这个 JQuery 函数

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-06 12:00:35

如何修改这个 JQuery 函数

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-06 12:00:35

解决方案1
1 已采纳 2016-03-06 12:00:35