方法一:

页面

<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遍历数组(实现百度搜索提示的效果)的更多相关文章

  1. Android AutoCompleteTextView控件实现类似百度搜索提示,限制输入数字长度

    Android AutoCompleteTextView 控件实现类似被搜索提示,效果如下 1.首先贴出布局代码 activity_main.xml: <?xml version="1 ...

  2. Android 控件 -------- AutoCompleteTextView 动态匹配内容,例如 百度搜索提示下拉列表功能

    AutoCompleteTextView 支持基本的自动完成功能,适用在各种搜索功能中,并且可以根据自己的需求设置他的默认显示数据.两个控件都可以很灵活的预置匹配的那些数据,并且可以设置输入多少值时开 ...

  3. ajax遍历数组对象

    success: function(data){ console.log(data); for (var warn in data) { alert(data[warn].kh_lxr); } } d ...

  4. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  5. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  6. 仿百度搜索(AJAX)

    <h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> < ...

  7. jsonp跨越请求百度搜索api 实现下拉列表提示

    题目来源: 最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示.题目是开源的,稍后给出地址. 因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一 ...

  8. 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  9. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

随机推荐

  1. Linux常用指令---系统负载

    查看linux系统负载: http://www.lupaworld.com/article-217011-1.html在Linux系统中,uptime.top等命令都会有系统平均负载load aver ...

  2. (转)shell实例手册

    原文地址:http://hi.baidu.com/quanzhou722/item/f4a4f3c9eb37f02d46d5c0d9 实在是太好的资料了,不得不转 shell实例手册 0说明{ 手册制 ...

  3. wpf键盘记录器

    很简单的一个wpf键盘记录器 这个程序我一样用了全局勾子,之前用的都是winform上运行了,前一段时间 在国外的论坛上逛看到了一个wpf能用的就做了一个小程序记录一下,为了方便大家直关的看我在页面上 ...

  4. java并发:获取线程执行结果(Callable、Future、FutureTask)

    初识Callable and Future 在编码时,我们可以通过继承Thread或是实现Runnable接口来创建线程,但是这两种方式都存在一个缺陷:在执行完任务之后无法获取执行结果.如果需要获取执 ...

  5. EntityFramework中Mapper怎么定义联合主键?

    HasKey(m => new { m.StoreId, m.CarTypeId, m.CarLevel}) 用“new {}”联合主键以“,”分隔形式定义

  6. 温故知新---重读C#InDepth(一)

    一本好书,或是一本比较有深度的书,就是每次研读的时候都会有新的发现. 好吧,我承认每次读的时候都有泛泛而过的嫌疑~~ 这几年一直专注于C#客户端的开发,逐步从迷迷糊糊,到一知半解,再到自以为是,最后沉 ...

  7. 第六章:javascript:字典

    字典是一种以键-值对应形式存储的数据结构,就像电话薄里的名字和电话号码一样.只要找一个电话,查找名字,名字找到后,电话号码也就找到了.这里的键值是你用来查找的东西,值就是要查的到的结果. javasc ...

  8. Graphics samples2

    为图形填充渐变色: Graphics2D g2=(Graphics2D)g; GradientPaint gra=new GradientPaint(20, 20, Color.BLUE, 100,8 ...

  9. tomcat 的安装

    安装tomcat的前提: 首先要做的是有java环境,这里我们可以选择安装jre(java环境包).或者说安装java开发工具包ldk 我这里选择安装jdk 我们在google里搜索jdk,你就能都找 ...

  10. POJ 2449Remmarguts' Date K短路模板 SPFA+A*

    K短路模板,A*+SPFA求K短路.A*中h的求法为在反图中做SPFA,求出到T点的最短路,极为估价函数h(这里不再是估价,而是准确值),然后跑A*,从S点开始(此时为最短路),然后把与S点能达到的点 ...