jquery autocomplete 搜索框提示 输入自动补全

本来是用select2在那里折腾了很久,后来发现用autocomplete自己写一下还更容易一些!

好的,主要实现的功能是,用户输入之后,每次输入都要从后台数据库拉出与用户输入模式匹配的信息。

先看效果图:

1. HTML

head部分加入对jquery-ui的引用

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

一个Input足以

<input id="right" type="text" name="myname"></input>

2. JS

js部分主要是,对该input的keyup操作进行处理,在该操作里,获取用户输入,并且把输入发往后台。从后台获取信息后,,使用autocomplete完成。总之,就是挺简单的。

$(document).ready(function () {(function(){var insertOptions = function(data, id) {var result = new Array();$.each(data, function(i, item){result.push(item);});$('#' + id).autocomplete({source: result});}$('.myname').keyup(function(){var right_id = $(this).attr('id');var url = "";$.get(url, function(data) {insertOptions(data, right_id);}, "json");});})();});

版权声明:本文为博主原创文章,未经博主允许不得转载。

销售世界上第一号的产品–不是汽车,而是自己。

jquery autocomplete 搜索框提示 输入自动补全

相关文章:

你感兴趣的文章:

标签云: