自动填充输入框 Asp .Net Mvc
2024-09-25 17:00:54
1 效果
当在一个文本框中输入时，可以自动查找相关选项，然后加载出来以供参考
2 前台代码
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<input type="text" id="city" name="city" />
<script type="text/javascript">
$("input#city").autocomplete({
source: "/mix/CityAutoComplete",
minLength: 1,
select: function (event, ui) {
alert("Select " + ui.item.label);
}
});
</script>
3 后台代码
此处的参数一定要是term的字符串，该字符串为当前在文本框中输入的值。在这里，自动找出与当前输入城市相同省份的城市。
public ActionResult CityAutoComplete(string term)
{
var cities = new List<City> {
new City{Id=1,Name="厦门",Province="福建省"},
new City{Id=1,Name="福州",Province="福建省"},
new City{Id=1,Name="泉州",Province="福建省"},
new City{Id=1,Name="西安",Province="陕西省"},
new City{Id=1,Name="长沙",Province="湖南省"},
new City{Id=1,Name="贵州",Province="湖北省"},
new City{Id=1,Name="包头",Province="甘肃省"},
new City{Id=1,Name="杭州",Province="浙江省"}
};
var currentCity = cities.FirstOrDefault(x => x.Name == term);
var projection = from city in cities
where city.Province == currentCity.Province
select new{
id = city.Id,
label = city.DisplayName,
value = city.DisplayName
};
return Json(projection.ToList(), JsonRequestBehavior.AllowGet);
}
最新文章
- 使用Xamarin开发iOS7应用时隐藏StatusBar方法
- STM32F746的RTC使用
- 第一周 总结笔记 / 斯坦福-Machine Learning-Andrew Ng
- jquery的ajax提交form表单
- Caused by: android.system.ErrnoException: open failed: EACCES (Permission denied)
- 页面静态化1 --- 概念（Apache内置压力测试工具使用方法）
- ubuntu sudo apt-get update 失败 解决方法
- 快速找到跟踪其他session产生的trc文件
- hdu 4602 Partition（矩阵快速幂乘法）
- 分享非常有用的Java程序 (关键代码)(五)---把 Array 转换成 Map
- 格式化格林威治时间（Wed Aug 01 00:00:00 CST 2012）
- iframe截取网站部分内容实现思路及代码
- python -- 装饰器的高级应用
- 例10-3 uva10375（唯一分解定理）
- shell脚本-正则、grep、sed、awk
- Prince and Princess HDU - 4685（匹配 + 强连通）
- Freemarker 页面静态化技术使用入门案例
- ALGO-4_蓝桥杯_算法训练_结点选择
- 使用Hystrix实现自动降级与依赖隔离-微服务
- undefined reference to 'pthread_create'问题解决 -- 转