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

来源：动视网责编：小采时间：2020-11-27 19:33:01

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

怎样使用juqery-ui完成联想查询的功能:这篇文章给大家介绍的文章内容是关于怎样使用juqery-ui完成联想查询的功能，有很好的参考价值，希望可以帮助到有需要的朋友。最近公司的项目有个需求，需要使用联想查询功能。就是一个文本输入框，在输入的时候获取值去后端模糊查询然后按照列表显示在下面。

推荐度：

点击下载本文 文档为doc格式

导读怎样使用juqery-ui完成联想查询的功能:这篇文章给大家介绍的文章内容是关于怎样使用juqery-ui完成联想查询的功能，有很好的参考价值，希望可以帮助到有需要的朋友。最近公司的项目有个需求，需要使用联想查询功能。就是一个文本输入框，在输入的时候获取值去后端模糊查询然后按照列表显示在下面。

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

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

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

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

</script>

html标签代码
<input type="text" name="xxx" id="xxx" />

然后就是通过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数组格式

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

<style>

.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: #57fb;border: none;color:#000;border-radius:0;font-weight: normal;}

</style>

好了，结束。

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

推荐度：

点击下载本文 文档为doc格式

标签：查询功能使用

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐