首页 > web前端 > js教程 > 正文

怎样使用juqery-ui完成联想查询的功能

不言
发布: 2018-07-28 11:03:09
原创
1519人浏览过

这篇文章给大家介绍的文章内容是关于怎样使用juqery-ui完成联想查询的功能 ,有很好的参考价值,希望可以帮助到有需要的朋友。

最近公司的项目有个需求,需要使用联想查询功能。
就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面。
效果如下图:

86582121-5b593dde89229_articlex.png

经过搜索找到这个插件,查阅资料可以完成这个功能,
即可以实现静态数据,也可以完成动态抓取显示。
使用方法如下:
(1)引入jquery-ui文件,当然还有jquery文件
 (2)定义一个input标签
导入代码即可

<script></script>

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
        ];
    $( "#tags" ).autocomplete({
         source: availableTags
    });
  });
登录后复制

html标签代码

然后就是通过ajax动态请求后台数据方式如下

$("#xxx").autocomplete({

source: function (request, response) {
    $.ajax({
        url: '',
        type: "POST",
        dataType: "json",
        data: {},
        success: function (data) {
            that.lineData=data;
            response(data);
        }
    });
},
minLength: 1,
scrollHeight: 1000,
autoFocus: true
登录后复制

});

后台返回数据类型为json数组格式

好了,到这里静态和动态的数据显示都完成了,当然为了满足自己项目肯定少不了修改相应的样式
修改的样式代码如下:

.ui-helper-hidden-accessible {display:none;}
.ui-autocomplete { position: absolute; cursor: default; border-radius: 3px; border: 1px solid #c0c0c0; }
.ui-menu {list-style: none;padding: 0;margin: 0;display: block;outline: none;}
.ui-menu .ui-menu-item a {text-decoration:none;display:block;padding:.2em .4em;line-height:1.5;zoom:1;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, 
.ui-widget-content .ui-state-focus, .ui-widget-header 
.ui-state-focus {background: #5897fb;border: none;color:#000;border-radius:0;font-weight: normal;}
登录后复制

好了,结束。

相关推荐:

js和es6中常用的字符串方法总结(收藏)

以上就是怎样使用juqery-ui完成联想查询的功能的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号