点击文本框搜索,出现在下拉列表中

输入用户名发送请求到后台,将用户的custId返回回来,保存到form中,再提交。根据custId去搜寻

$("#custNameButton").click(function () {
var custName=$("#custName");
var value = custName.val();
if(value.length==0)return;
var selectBox=$("<div></div>");
selectBox.addClass("select4_box");
$.ajax({
"contentType":"application/x-www-form-urlencoded;charset=utf-8",
"type":"post",
"dataType":"json",
"data":{
name:value
},
url:"${ctx}/XXXX/XXXXX/XXXData",
success:function(data){
if(custName.parent().find(".select4_box").length>0)custName.parent().find(".select4_box").remove();
var ul=$("<ul></ul>");
$.each(data.data||[],function(index,item){
var li=$("<li></li>");
li.attr("data-id",item.id);
li.text(item.name);
li.click(function(){
custName.val($(this).text());
$("#custId").val($(this).attr("data-id"));
$(this).closest(".select4_box").remove();
});
ul.append(li);
});
selectBox.append(ul);
custName.parent().append(selectBox);
}

});

});

=========================================

<form:hidden path="custId" />

<label>用户昵称:</label>
<div class="input-append">
<form:input path="custName" htmlEscape="false" maxlength="128" class="input-small" id="custName"/>
<a id="custNameButton" href="javascript:" class="btn " style="">&nbsp;<i class="icon-search"></i>&nbsp;</a>&nbsp;&nbsp;
</div>

时间: 2024-10-13 03:12:32

点击文本框搜索,出现在下拉列表中的相关文章

点击文本框弹出可供选择的checkbox复选框代码实例

点击文本框弹出可供选择的checkbox复选框代码实例:本章节分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&qu

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

ios Simulator运行中 ,点击文本框不能自动弹出keyboards的问题

运行新做的计算器App的时候有个小问题,点击文本框不能在模拟器下方自动弹出来键盘,只能通过电脑的键盘输入数字 解决方法如下: 打开模拟器,在最上面的菜单栏中,选择hardware,然后选择keyboards,有三个选项, 依次都勾选就行了.(注意:第三个选项在点击之后,实际已勾上了,但显示未勾上,但实际已经奏效了,这可能是xcode6的一个显示上的bug)

jquery ui autocomplete 实现点击文本框,出现所有查询信息效果

直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jqu

点击文本框清除默认文本离开再恢复

点击文本框清除默认文本离开再恢复:很多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

如何实现点击文本框清除其中文本

如何实现点击文本框清除其中文本: 此种效果经常用在搜索框中,默认状态下搜索框中有提示语言,当点击搜索框时会清除其中的文本,下面就来简单介绍一下如何实现此种效果.尽管此效果没有用到CSS代码,因为代码比较常用,所以在这里也介绍一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http:

jQuery实现点击文本框清除内容代码实例

jQuery实现点击文本框清除内容代码实例:本章节介绍一下文本框最简单的一个人性化措施,就是点击文本框的时候能够删除里面的提示文本.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容. Textarea 单击鼠标 清除默认字 点击文本域 默认内容消失 点击文本框 删除预置内容 在留言框.搜索栏或者Email订阅栏中有一段默认的文本,比如“请输入您的内容”,如果你在其中点击(窗体获取焦点),这段默认的文本就会自动消失. 第一步:添加代码方式: <head> …. <script type=”text/javascript”> function clearDefault(el

将文本框内容添加到表格中的行代码实例

将文本框内容添加到表格中的行代码实例:在实际操作中,往往需要将文本框中的内容添加到表格的行中或者类似的情况,下面就通过一个实例介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&