ajax遍历数组(实现百度搜索提示的效果)
方法一:
页面
<input type="hidden" id="classpath" value="${pageContext.request.contextPath }"/>
<div id="div">
<form id="userForm">
<span>搜索用户:<input type="text" id="text_input" name="userName" value=""/> 输入后自动搜索</span>
</form>
<div id="usersdiv">
<ul>
</ul>
</div>
</div>
遍历数组
//点击text事件
$(function(){
function text_input_sousuo(){
var classpath = $("#classpath").val();
var userName = $("#text_input").val();
var usersdiv = $("#usersdiv ul");
var text = "";
//ajax
$.ajax({
type:"Post",
data:{"userName":userName},//传入的参数
dataType:"json",//接收回来是数组
url:classpath+"/getUserByAllJson",
success:function(data){
$.each(data.users,function(i){
text+="<li>"+data.users[i].userName+"</li>";
});
usersdiv.html(text);
var usersli = $("#usersdiv ul li");
usersli.css({"float":"left","border":"1px solid #cccccc","height":"28px",
"width":"60px","margin":"10px","background-color":"#efefef","cursor":"pointer"
});
usersli.on("click",function(){
$("#text_input").val($(this).html());
usersdiv.empty();
});
} });
};
$("#text_input").on("keyup",function(){
text_input_sousuo();
});
$("#text_input").on("focus",function(){
text_input_sousuo();
});
strust文件
<package name="users" extends="json-default" namespace="/">
<action name="getUserByAllJson" method="getUserByAll" class="cn.bdqn.action.user.UserAction">
<result type="json">
<param name="includeProperties">users.*</param>
</result>
</action>
</package>
方法二:用getJSON来做(思路)
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
<package name="users" extends="json-default" namespace="/">
<action name="getUserByAllJson" method="getUserByAll" class="cn.bdqn.action.user.UserAction">
<result type="json">
<param name="root">users</param>
</result>
</action>
</package>
ajax遍历数组(实现百度搜索提示的效果)的更多相关文章
- Android AutoCompleteTextView控件实现类似百度搜索提示,限制输入数字长度
Android AutoCompleteTextView 控件实现类似被搜索提示,效果如下 1.首先贴出布局代码 activity_main.xml: <?xml version="1 ...
- Android 控件 -------- AutoCompleteTextView 动态匹配内容,例如 百度搜索提示下拉列表功能
AutoCompleteTextView 支持基本的自动完成功能,适用在各种搜索功能中,并且可以根据自己的需求设置他的默认显示数据.两个控件都可以很灵活的预置匹配的那些数据,并且可以设置输入多少值时开 ...
- ajax遍历数组对象
success: function(data){ console.log(data); for (var warn in data) { alert(data[warn].kh_lxr); } } d ...
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- Ajax跨域实现淘宝/百度搜索下拉提示效果
最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:
- 仿百度搜索(AJAX)
<h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> < ...
- jsonp跨越请求百度搜索api 实现下拉列表提示
题目来源: 最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示.题目是开源的,稍后给出地址. 因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一 ...
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
随机推荐
- ASP.NET中进行消息处理(MSMQ) 二
在我上一篇文章<ASP.NET中进行消息处理(MSMQ)一>里对MSMQ做了个通俗的介绍,最后以发送普通文本消息和复杂的对象消息为例介绍了消息队列的使用. 本文在此基础上继续介绍MSMQ的 ...
- freemarker语法简介
ftl是一种模板标记语言,用于渲染数据,输入html结构.语法简介如下: ${book.name} ${book.name?if_exists} //值是否存在 ${book.name??} //值是 ...
- Word 文档插入时间日期禁止自动更新
前些天写了点总结并插入时间和日期,记得勾掉了那个自动更新的,但是刚才打开时发现当时的日期和时间变成现在的了,我就纳闷了,然后我去看那插入日期和时间的那个框,里面确实没有勾选自动更新,于是百度, 百度都 ...
- Jquery操作select,radio,input,p之类
select的操作 变化后触发操作 $("#txtaddprojecturl").change(function(){ $("#addprojectname") ...
- IOS判断app在appstore是否有可用的更新
iTunes可以提供app的版本信息,主要通过appid获取,如 http://itunes.apple.com/lookup?id=946449501,使用时只需要到iTunes查找自己的appid ...
- jqurey 遍历 div内的所有input单选复选按钮并判断是否选中及Attr(checked)无效的解决
关于页面前面标签 <ul> @{ foreach (var item in vote) { if (!string.IsNullOrEmpty(item.Img)) { <li cl ...
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- 每天一个linux命令(8):cat 命令
cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1.命令格式: cat [选项] [文件] ...
- git使用问题汇总
2015.11.29 一.git clone 出现如下问题: 解决方案:添加一个ssh keys.步骤如下: 1.生成一个ssh-key(图片来自网络) 2.找到“Your identificatio ...
- 转:java多线程--同步容器
java同步容器 在Java的集合容器框架中,主要有四大类别:List.Set.Queue.Map.List.Set.Queue接口分别继承了Collection接口,Map本身是一个接口.注意Col ...