代码之家 › 专栏 › 技术社区 › Mahesh V S

Materialzecss:从自动完成弹出窗口中选择项目时是否有任何事件?

search-box materialize autocomplete

0

Mahesh V S · 技术社区 · 7 年前

我想用 autocomplete 作为搜索框,以便通过更新用户类型的数据,在弹出窗口中显示搜索结果。当用户单击弹出窗口中的一个项目时,他应该被导航到另一个页面。我还想知道是否有任何方法可以将ID与数据相关联,以便在另一页中使用。

如果自动完成不是正确的候选人,请建议任何替代物物化CSS提供。

1 回复 | 直到 7 年前

1

0

niclas_4 7 年前

 
  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
      alert(val)
      
      //Here you then can do whatever you want, val tells you what got clicked so you can push to another page etc...
    },
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>


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