页面

<div class="manage-Car-add-info-sn">
<p style="width:25%; height:70%;float:left;text-align:right">设备SN编号:</p>
<form:input path="sn" id="sn" list="suggest_ul" class = "input_SN" type="text" />
<datalist id="suggest_ul"></datalist>

ajax

$("#sn").keyup(function(){
//如果文本框为空,不发送请求
if($("#sn").val().length == 0){
$("#suggest_ul").hide(0);
return false;
}
console.log($("#sn").val());
var url = "getDeviceSn";
var sn = $("#sn").val();
$.ajax({
type:"post",
url :url,
data: {"sn":sn},
datatype:"json",
success:function(json){
if(json){
$("#suggest_ul").show(0);
$("#suggest_ul").html(json);
}
}
})
})

controller

List<String> modelList = sectorService.getDeviceSn(sn);

StringBuffer sb = new StringBuffer();

for (String string : modelList) {

sb.append("<option>" + string + "</option>");

}

return sb.toString();

input ajax自动补全的更多相关文章

  1. jquery input 搜索自动补全、typeahead.js

    最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...

  2. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  3. Ajax和Json实现自动补全

    1.index.jsp <%@ page language="java" import="java.util.*" pageEncoding=" ...

  4. AJAX实现类似百度的搜索提示,自动补全和键盘、鼠标操作

    <script type="text/javascript"> $(document).ready(function(){ var highlightIndex = - ...

  5. autocomplete实现联想输入,自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  6. bigautocomplete实现联想输入,自动补全

    bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax ...

  7. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

  8. jquery 自动补全控件(支持IE6)待整理

    自动补全控件(兼容IE6):http://bassistance.de/ download地址:http://jquery.bassistance.de/autocomplete/jquery.aut ...

  9. bootstrap3-typeahead 自动补全

    很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://gith ...

随机推荐

  1. 使用bbed编辑研究oracle数据块结构

    bbed是随oracle软件公布的一款数据块查看和编辑工具,作为一款内部工具.bbed的功能很强大,可是假设使用不当可能给数据库造成无法挽回的损失.因此.我们建议在使用bbed改动数据块前备份被改动的 ...

  2. kali linux下更新163源可使用RPM

    在没有安装163源之前 更新163源 1.在终端输入#leafpad /etc/apt/sources.list 2.打开网页 http://mirrors.163.com/.help/debian. ...

  3. Android打印日志管理

    做项目的时候,免不了要打印许多日志,等项目上线了,想要去除日志是又找不到在哪里怎么办?我们可以建立一个日志打印的类来统一管理: public class LogUtil { public static ...

  4. SQL获取某个时间字符串里的月和日,获取某天是周几

    select datename(weekday,'2016-11-4') as '周' select convert(varchar,datepart(month,'2016-11-4')) as ' ...

  5. javascript实例:点亮灯泡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 重写toString方法

    当你要读取关于对象的一些有用细节时,可以在对象上调用toString(). 如,当把一个对象引用传递给System.out.println();时,该对象的toString()方法被调用. Java中 ...

  7. unknown facet type would you like to ignore facet from module

    去idea plugin 里面把红色的插件 重新勾选一下,点apply 重启就可以了

  8. Android-自己定义meta-data扩展数据

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wwj_748/article/details/25079991 Android-自己定义meta-d ...

  9. Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)

    android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, WA ...

  10. boost之正确性和测试

    BOOST_ASSERT在debug模式下有效. #include <iostream> #include <boost/assert.hpp> using namespace ...