基于jQuery-autocomplete文本框自动联想补全特效

基于jQuery文本框自动联想补全特效。这是一款简单使用的jQuery自动完成插件,可定义索引关键词,可设置输入框的宽高,支持搜索回调函数。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div id="demo">
       <div class="wrapper">
           <h3>试试输入"爱编程"</h3>
           <div id="search-form"></div>
           <div id="message"></div>
       </div>
   </div>

js代码:

var proposals = [‘at‘, ‘boat‘, ‘bear‘, ‘chief‘, ‘dog‘, ‘drink‘, ‘elephant‘, ‘fruit‘, ‘grave‘, ‘hotel‘, ‘illness‘, ‘London‘, ‘motorbike‘, ‘爱编程素材‘, ‘爱编程jquery‘, ‘站长爱编程w2bc.com‘];

       $(document).ready(function () {
           $(‘#search-form‘).autocomplete({
               hints: proposals,
               width: 300,
               height: 30,
               onSubmit: function (text) {
                   $(‘#message‘).html(‘Selected: <b>‘ + text + ‘</b>‘);
               }
           });
       });

Via:http://www.w2bc.com/article/2015-12-01-jquery-input-token-compete

时间: 2024-08-25 11:43:27

基于jQuery-autocomplete文本框自动联想补全特效的相关文章

input autocomplete 文本框自动检索

首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css. 由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下. 前台代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %&

文本框输入邮箱自动联想补全

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title></title&g

Chrome表单文本框自动填充黄色背景色样式

开发后台管理系统或 网站时,使用谷歌的Chrome浏览器访问网页中表单,文本框背景色自动填充为黄色.这个问题在网络上其实早已经是老生常谈了,今天正巧我要处理这个问 题,把之前查阅的一些资料和自己解决这个问题的方法纪录在此,一是为大家遇到此问题时提供一份资料,二是作为自己的笔记.过多的话就不多说了,下面进入正 题. 一.首先介绍一下我遇到这个问题时文本框的样式情况:  上图为Chrome浏览器为表单中的文本框自动填充黄色背景色的样子, 我自己为文本框加的,获得焦点后,周围有蓝色阴影. <input

基于jquery的提示框JavaScript 插件,类Bootstrap

目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://github.com/Ethan-Xie/message 实例 通过此此插件可以为提示栏添加自动/点击消失的功能 用法 需引入message.css与message.js <link rel="stylesheet" href="message.css"> &l

jQuery监控文本框事件并作相应处理的方法

本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document)  .on('input propertychange', '#query', function(){   var input = $(this).val();   show(input);  });  var show = function(txt){   var info = '监听:<b>' + txt + '</b><br /><

用Jquery控制文本框只能输入数字和字母

只为成功找方法,不为失败找借口! 用Jquery控制文本框只能输入数字和字母 在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,

js/jquery获取文本框的值与改变文本框的值

我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtbox2").value=document.getElementById("txtbox").value; //获取文本框1的值,并赋值给文本框2}</script> <table width="500" border="0"

jquery限制文本框只能输入数字、JQuery 限制文本框只能输入数字和小数点

/*JQuery 限制文本框只能输入数字及小数点 */ <script> $(function(){ /*JQuery 限制文本框只能输入数字*/ $("#id").keyup(function(){ $(this).val($(this).val().replace(/\D|^0/g,'')); }).bind("paste",function(){  //CTR+V事件处理 $(this).val($(this).val().replace(/\D|

jquery 限制文本框只能输入数字

1 $("input[name='searchBean.con1']").keyup(function(){ //keyup事件处理 2 $(this).val($(this).val().replace(/\D|^0/g,'')); 3 }).bind("paste",function(){ //CTR+V事件处理 4 $(this).val($(this).val().replace(/\D|^0/g,'')); 5 }).css("ime-mode&