input文本输入框自动提示-autocomplete

最新推荐文章于 2024-01-06 12:01:22 发布

清风醉雨

最新推荐文章于 2024-01-06 12:01:22 发布

阅读量2.8k

点赞数 2

分类专栏： web前端技术文章标签： javascript jquery

本文链接：https://blog.csdn.net/Firewall5788/article/details/120362484

版权

web前端技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先来说，由于作者刚接触网站的开发，这篇文章写得有点乱，主要是记录给自己看的，怕以后忘记了，方便到时候查阅，若给您带来了不便，还请见谅。若有什么建议，请留言。非常感谢。

--------------------------------------------步入正题--------------------------------------------

问题（目标）：目标样式如图1所示，当在文本框中输入字符时，实时进行提示相关信息，供用户参考和选择。

图1 文本框自动提示

**分析：**那么这个功能该如何实现呢，jQuery提供了一个插件autocomplete可以根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。

**What should we do ? **
How to do it ?

首先：下载jQuery和jQuery UI的包
jQuery 下载地址：http://jquery.com/download/
jQuery UI 下载地址： http://jqueryui.com/download/ ，在下载jQuery UI 时要注意，最后一步选择的是主题类型。如图2所示。

图2 下载 jQuery UI 选择主题类型

将下载下来的库文件（作者以本机为例） jquery-3.2.1.min.js 、jquery-ui.min.js 、jquery-ui.css 放到你要写的 html 文件同一个文件夹中或者你能找到的路径下。

第一种：静态数据显示 源码下载

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Default functionality</title>
	<link rel="stylesheet" href="jquery-ui.min.css"> <!-- 此处根据你自己的路径进行设置 -->
	<script src="jquery-3.2.1.min.js"></script> <!-- 此处根据你自己的路径进行设置 -->
	<script src="jquery-ui.min.js"></script> <!-- 此处根据你自己的路径进行设置 -->
	<script>
		$(function() {
			var availableTags = [
				"ActionScript",
				"AppleScript",
				"Asp",
				"BASIC",
				"C",
				"C++",
				"Clojure",
				"COBOL",
				"ColdFusion",
				"Erlang",
				"Fortran",
				"Groovy",
				"Haskell",
				"Java",
				"JavaScript",
				"Lisp",
				"Perl",
				"PHP",
				"Python",
				"Ruby",
				"Scala",
				"Scheme"
			];
		    $( "#tags" ).autocomplete({
				source: availableTags
		    });
		});
	</script>
</head>
<body>
	<div class="ui-widget">
	    <label for="tags">Tags: </label>
	    <input type="text" id="tags">
	</div>
</body>
</html>

效果如图3所示。注意这个下拉框的颜色是由你所选择的jQuery UI 的主题决定的。

图3 显示效果图

第二种：动态数据显示
通过ajax实时访问后台数据库，获取数据后显示在提示框内。

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Default functionality</title>
	<link rel="stylesheet" href="jquery-ui.min.css">
	<script src="jquery-3.2.1.min.js"></script>
	<script src="jquery-ui.min.js"></script>
	<script>
		$(function () {
		    $("#tags").autocomplete({
		        source: "/ceshi/", //请求后台，具体的URL根据你的实际情况进行设置
		    });
	</script>
</head>
<body>
	<div class="ui-widget">
	    <label for="tags">Tags: </label>
	    <input type="text" id="tags">
	</div>
</body>
</html>

推荐文章1：http://www.runoob.com/jqueryui/example-autocomplete.html主要在于比较全面，若当你出现需要滚动条、宽度设置等等问题的时候，可以在里面查找相应的例子进行copy，本文主要是起一个记录和启发的作用。
推荐文章2：http://blog.csdn.net/qililong88/article/details/51941641看他里面的ajax部分

最后讲述一个问题
将例1定义的数组中添加几个中文元素以及部分带空格的元素，可以发现，当我们在利用中文输入法尚未完成输入就已经显示了一部分查询结果，如图4所示。

var availableTags = [
        "面向 对象",
        "面向过程",
        "How are you!",
        "Hello world!",
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];

图4 中文尚未输入完成便显示部分查询结果

通过分析，我们可以看到，在我们输入中文的时候默认就有一个空格显示在输入框中，所以查询匹配的都是带有空格的元素。

解决的办法：

在后台进行判断，若输入的是空格，则丢弃，不进行查询
设置最小匹配长度，minLength为2，即当至少输入2个字符才进行匹配。

代码如下 源码下载

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="jquery-ui.min.css"> <!-- 此处根据你自己的路径进行设置 -->
  <script src="jquery-3.2.1.min.js"></script> <!-- 此处根据你自己的路径进行设置 -->
  <script src="jquery-ui.min.js"></script> <!-- 此处根据你自己的路径进行设置 -->
  <script>
    $(function() {
      var availableTags = [
        "面向 对象",
        "面向过程",
        "How are you!",
        "Hello world!",
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
        $( "#tags" ).autocomplete({
        source: availableTags,
        minLength: 2
        });
    });
  </script>
</head>
<body>
  <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input type="text" id="tags">
  </div>
</body>
</html>

清风醉雨

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
input文本输入框自动提示-autocomplete

首先来说，由于作者刚接触网站的开发，这篇文章写得有点乱，主要是记录给自己看的，怕以后忘记了，方便到时候查阅，若给您带来了不便，还请见谅。若有什么建议，请留言。非常感谢。--------------------------------------------步入正题--------------------------------------------问题（目标）：目标样式如图1所示，当在文本框中输入字符时，实时进行提示相关信息，供用户参考和选择。**分析：**那么这个功能该如何实现呢，jQuery提
复制链接

扫一扫