Question

我使用jquery.autocomplete来显示搜索建议。现在，该函数获取值并将其插入＆＃34; / collections /＆＃34;。

我想为每个标记添加一个自定义网址。如果有人能告诉我如何实施这将是非常棒的。

＆＃13;

$(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()
    }
  });



});

＆＃13;

<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>

＆＃13;

这样的事情：

$(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

为此，您可以使用ui.item.{parameter}，因此在您的情况下，ui.item.url

在这种情况下，当您点击自动填充中的值时ui.item设置为：

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

然后您可以轻松选择网址并指出文档位置

＆＃13;

$(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;      
      }

    });
  });

＆＃13;

<!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>

＆＃13;

如何修改这个JQuery函数

1 个答案: