jquery - 是否可以通过 Materialize 将 href 属性添加到自动完成功能？

Question

一旦点击自动完成的<li>这是在引入要重定向到任何地方的单词后生成的。我猜可能是这样的:

"Apple": {
    id: 1,
    text: 'Apple Inc',
    image: null,
    href: 'http://google.es',
},

但是它当然不适用于 href 行:-(

Answer 1

.autocomplete()中有一个选项也就是说，

onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
},

所以无论你在里面写什么onAutocomplete:选项，该选项将在您从自动完成输入中选择一个值后执行。在您的情况下，您想要打开指定的 URL，因此您可以使用 window.open()来实现这一目标。

我创建了一个工作 jsfiddle看看它。

演示: https://jsfiddle.net/Tirth_Patel/bcct9nfn/

示例

HTML

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">

        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">Autocomplete</label>

      </div>
    </div>
  </div>
</div>

jQuery

$(document).ready(function(){

    $('input.autocomplete').autocomplete({
        data: {
          "Apple": null,
          "Google": null,
          "Microsoft": null,
        },

        onAutocomplete: function(val) {

           // Callback function when value is autcompleted.

           // Grabbing input after autocomplete is done
           var value = $('input.autocomplete').val();

           if(value == "Apple"){
               var link = window.open('http://www.apple.com', '_blank');
               link.location;

           } else if(value == "Google"){
               var link = window.open('http://www.google.com', '_blank');
               link.location;

           } else {
               var link = window.open('http://www.microsoft.com', '_blank');
               link.location;
           }

        },

    });
});

编辑

打开Different URLs上Different autocomplete然后获取 autocomplete input 的值自动完成完成后并使用 if..else 检查值并为不同的自动完成打开不同的 URL。