首先来说,由于作者刚接触网站的开发,这篇文章写得有点乱,主要是记录给自己看的,怕以后忘记了,方便到时候查阅,若给您带来了不便,还请见谅。若有什么建议,请留言。非常感谢。
-------------------------------------------- 步入正题 --------------------------------------------
问题(目标):目标样式如图 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 所示。
将下载下来的库文件(作者以本机为例) 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 的主题决定的。
第二种:动态数据显示
通过 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>
- 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"
- ];
- <!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>
来源: http://www.jianshu.com/p/a499e7602304