隽永东方设计工作室
Eastern Design Studio Menu

东方设计学院HTML5系列教程 ☞ HTML5 Datalist表单自动填充

1 星2 星3 星4 星5 星
(1 票, 评分: 5.00 总分 5)  

本站站内搜索目前采用了强大的Google Custom Search(以下简称GCS),曾尝试过直接采用GCS的搜索框,后来发现国内坑爹的G.F.W时不时屏蔽Google相关服务,导致网站因此而无法载入,为了一个并不那么重要但在某些时候又必不可少的站内搜索而直接导致网站载入不顺畅有点得不偿失,因此无奈之下采用了GCS结合WordPress自带的搜索框来实现,这个方案可以既集成了GCS强大的站内搜索功能,又能有效规避因为GCS被屏蔽导致的网站载入不顺畅的问题,不过也因为放弃了GCS自带的搜索框,而缺失了类似表单自动填充关键词的很人性化的功能,于是想到了何不用HTML5 Datalist属性来实现呢,方法如下:

首先打开模版里边搜索表单的文件,比如本站的相关文件为:search-form.php,然后找到该文件的搜索输入框代码处,比如我这里的代码如下:

在这个代码里边加入一个 list=”keywords” 的属性,如下:

然后在后边再加入一个表单自动填充的关键词列表如下:

以上实际关键词根据实际站点情况进行增删,保存上传覆盖以后,刷新网站,试着在搜索框输入一个大写的W看看,是否看到了底下出现了一个下拉菜单,自动列出来了所有以上代码预设的关键词,甚至你不输入任何关键词,仅仅双击该搜索框也会自动出来一个列表,很酷吧?当然这个特性有浏览器支持限制,目前在Google Chrome和Firefox底下完美测试通过,别的浏览器大家可以去测试看看,但是可以肯定的是ie会支持得比较惨。

html5-autocomplete




  售前在线询价
  全网营销套餐
  隽永东方学院