qt怎么自动创建控件_创建自动完成数据列表控件

最新推荐文章于 2023-09-26 08:38:21 发布

dingshi7798

最新推荐文章于 2023-09-26 08:38:21 发布

阅读量353

点赞数

文章标签： java python 编程语言 javascript css ViewUI

原文链接：https://www.sitepoint.com/creating-autocomplete-datalist-controls/

版权

qt怎么自动创建控件

如果您一生中看到的网站数量不错，那么您肯定会注意到其中大多数重复出现的小部件。这些小部件中包括搜索框，新闻稿小部件和文本框自动完成小部件。后者是一个广泛使用的组件，尤其是在网站需要具有多个可能值但又需要允许创建一个全新值的字段时。采用此组件的方式使得许多JavaScript框架都有自己的自动填充小部件。

直到几年前，还没有原生HTML元素来处理这种情况，开发人员已经以不同的方式实现了这一概念。不再缺少这个HTML难题。今天，我们有一个名为datalistHTML元素datalist此目的。在本文中，我们将发现它是什么以及如何使用它。

`datalist`元素是什么？

datalist元素代表一组选项元素，这些元素包含其他控件的预定义选项。因此，此元素可以看作是一组option的包装，这些option表示input可以假定的可能值，而不仅限于这些值。默认情况下， datalist及其子级是隐藏的，因此您不会在网页中看到它们。事实上， datalist必须通过使用来链接到另一个元素list上的这些其他元素的属性集。此属性的值必须设置为要使用的datalist的ID。

使用此元素HTML代码的简单示例如下所示：

<input name="city" list="cities" />
<datalist id="cities">
   <option value="Naples" />
   <option value="London" />
   <option value="Berlin" />
   <option value="New York" />
   <option value="Frattamaggiore" />
</datalist>

上面的代码定义了一个input和一个datalist元素，其中包含几个option 。如您所见， datalist list ID为“ cities”，并且input通过使用list属性（也具有“ cities”作为其值）链接到它。

该代码的实时演示如下所示，可以作为JSFiddle使用。

由于其性质，此元素很适合与JavaScript结合使用。例如，您可以对服务器执行Ajax请求，以根据用户的输入检索相关值。

一个例子示于下面的演示，可作为一个的jsfiddle ，其中所述option S的datalist是动态生成的。

到目前为止，我们已经讨论了如何自动完成文本字段，但这并不是我们可以使用此HTML元素的唯一情况。

`datalist`和`<input type="color">`

前面的示例很好，但是您可以使用datalist进行更多操作。如果您想通过使用<input type="color">向用户建议颜色，该怎么办？在这种情况下，您可以编写以下代码：

<input type="color" list="colors" />
<datalist id="colors">
   <option value="#00000"/>
   <option value="#478912"/>
   <option value="#FFFFFF" />
   <option value="#33FF99" />
   <option value="#5AC6D9" />
   <option value="#573905" />
</datalist>

目前只有Chrome 37和Opera 24很好地支持该演示。 Internet Explorer 11将字段显示为文本字段，而Firefox 32不显示建议的颜色。

该代码的实时演示如下所示，可以作为JSFiddle使用。

`datalist`和`<input type="range">`

另一个使用示例是与<input type="range">元素结合使用的：

<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
   <option value="20" /> 
   <option value="40" /> 
   <option value="60" /> 
   <option value="80" /> 
</datalist>

在这种情况下，在支持该演示的浏览器（Internet Explorer，Opera和Chrome）上，范围栏将具有四个等间距的竖向符号，每个竖向符号均用于datalist定义的每个值。

该代码的实时演示如下所示，可以作为JSFiddle使用。