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>
上一篇:java获取中文拼音首字母


下一篇:PHP获取中文汉字首字母方法