是否可以通过materialize将href属性添加到自动完成功能?

时间:2017-10-19 15:43:07

标签: jquery materialize

点击自动完成的<li>后,会在引入要重定向到任意位置的字词后生成。我猜它可能是这样的:

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

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

1 个答案:

答案 0 :(得分:0)

.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检查该值并为不同的自动填充打开不同的网址。