autocomplete 实现的input输入框智能提示

jquery+ajax+input输入框
jquery 的autocomplete插件

jquery 框架

//导入脚本文件
<link rel="stylesheet" href="/js/jquery-ui.css">
<script type="text/javascript" src="/js/jquery.min.js" ></script>
<script src="/js/jquery-ui.js"></script>

javaScript代码

<div class="col-sm-10">
     <input type="text" autocomplete="off" name="astUids" class="form-control" id="devicesUid" th:value="${repair.astUids}" placeholder="请输入识别码" />
     <div id="auto_div"></div>
</div>
//javascript脚本
<script type="text/javascript">
    $(document).ready(function () {
        $( "#devicesUid" ).autocomplete({
            max: 5,
            minChars: 1,
            matchContains: true,
            minLength: 2,
            width: $("#devicesUid").width()+1,
            matchContains: true,
            source: function( request, response ) {
             // response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
                $.ajax( {
                    url: "/console/oamRepair/inputQuery",
                    dataType: "json",
                    data: {
                        term: request.term      // request对象只有一个term属性，对应用户输入的文本
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.label
                                //value: item.value
                            }
                        }));
                    }

                });
            },
            select: function( event, ui ) {
                console.log( "Selected: " + ui.item.value + " aka " + ui.item.label );
            }
        } );
    });
</script>

java 后台代码

• 接收前端的查询参数，然后以JSON格式返回数据到页面

   @RequestMapping(value = "/inputQuery", method = {RequestMethod.GET})
    public void inputQuery(HttpServletRequest req, HttpServletResponse response) {
        // 查询的参数名称默认为term
        String termValue = req.getParameter("term");
        List<String> codeLists = ....;

        JSONArray devsArray = new JSONArray();
        if(codeLists .size()>0) {
            for (String ac : codeLists ) {
                JSONObject obj = new JSONObject();
                String deviceFullName= getFullCode(ac);
                if(deviceFullName!= null){
                    obj.put("label", deviceFullName);
                    obj.put("value", ac);
                    devsArray.add(obj);
                }
            }
        }
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out =null;
        try {
            out = response.getWriter();
            out.print(devsArray.toJSONString());
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if(out != null){
                out.close();
            }
        }
    }