时间戳

首页 > 解决方案 > 自动完成文本框简单方法

javascript - 自动完成文本框简单方法

问题描述

航空公司搜索 航空公司搜索

我正在创建一个允许搜索航班可用性的网页，为此，我想为 FROM 和 TO 目的地设计自动完成文本框，并且默认情况下必须选择搜索自动完成的第一个选项。我使用了 html5 datalist 属性，不幸的是，它只提供了有限的 css 属性。我搜索了很多相同的方法，但都是非常复杂的方法。任何人都可以通过提供一些简单的方法或适当的链接来提供帮助。

标签： javascripthtmlcssjquery-ui-autocomplete

解决方案

您可以使用 selectize.js 创建自动完成功能。使用起来非常简单，只需创建一个带有选项的 HTML 选择并给它一个 id 并将这个 id 传递给 selectize。

例如：

<select id="fromInput">
  <option value="nyk">New york</option>
  <option value="sf">San Francisco</option>
</select>

js

   var select = $('#fromInput').selectize({
        create: true,
        sortField: 'text'
    });

  //setting default value
  $select[0].selectize.setValue("nyk");

更多详情：https ://selectize.github.io/selectize.js/

推荐阅读