本来是用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");});})();});
版权声明:本文为博主原创文章,未经博主允许不得转载。
销售世界上第一号的产品–不是汽车,而是自己。