zoukankan      html  css  js  c++  java
  • JQuery--使用autocomplete控件进行自己主动输入完毕(相当于模糊查询)

        之前为了实现这个功能花了我几天的时间。

    事实上。实现了之后发现也就那么回事,正所谓万事开头难嘛。。

    废话不多说了。这里我使用的是JQuery控件库中的一个Autocomplete控件。即Autocomplete.js,所以首先你要做的就是到JQuery的官网下载这个Autocomplete控件。由于jquery-ui.js中已经包括了Autocomplete.js,所以在html或者.jsp文件里直接引用jquery-ui.js就ok了。下载地址http://jqueryui.com/download/。然后。就是要从后台获取数据和控件的数据源进行绑定。即将获取到的数据赋值给控件的数据属性source(source的数据格式是数组形式。)这样就能实现你想要的功能了。详细的实现代码例如以下。仅供參考,如有不正确的地方请多多不吝赐教。

    <pre name="code" class="html"><pre name="code" class="html"><link type="text/css" rel="stylesheet" href=css/jquery-ui.css>
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="../jquery-ui.js"></script>
    /*获取后台数据的详细实现。这里採用的是$.ajax*/var userName = "zhangsan"; var nameList = []; function getRoleList() { $.ajax({ url:"findUser.action", type:"Post", dataType:"json", error:function(){alert("error");}, success:function (data) { $.each(data, function (i, item) { nameList.push(item.userName); }); $("#userName1").autocomplete({ source:nameList }); } }); }; $(function(){ getRoleList(); //获取后台数据 var name = ''; if (name == null || name == "") $("#userName").val(""); else $("#userName").val(name); });</script>

    
    

    
    

  • 相关阅读:
    ADO数据库操作
    AfxMessageBox和MessageBox区别
    Qt — 子窗体操作父窗体中的方法
    Qt — tableWidget插入复选框
    Qt & MySQL
    windows下安装Qt
    Extjs — Grid数据导出成Excel
    Mac终端 vi/vim 的简单使用
    iOS开发CocoaPods使用说明
    Shell 脚本学习笔记十:Shell输入输出重定向
  • 原文地址:https://www.cnblogs.com/lxjshuju/p/6761604.html
Copyright © 2011-2022 走看看