bootstrap实现的类似百度搜索的输入框自动完成功能（动态获取数据库的值）

    <div class="search">
                    <input type="text" data-provide="typeahead" id="product_search" class="flight"/>
                    <input name="find" class="search_btn" value="全站搜索" type="button"
                        οnclick="doCheckSearch();" />
     </div>

<script type="text/javascript">
         $(function(){
             $('#product_search').typeahead({
                    source: function (query, process) {
                        var parameter = {querys: query};
                        return  $.ajax({
                            url: "<%=request.getContextPath()%>/flightController/search.action",
                            type: 'post',
                            data: {'querys' : query},
                            dataType: 'json',
                            success: function (data) {  
                                return process(data.XX);                                        
                            }
                        });
                    }
                });
         })   
        
    </script>

后台代码：

public HashMap<String, Object> search(String querys){
        
        System.out.println("========"+querys);
        List<FlightInfo> list = flightService.searchFlightno("%"+querys+"%");
        HashMap<String, Object> hashMap = new HashMap<String, Object>();
        
        List<String> lists = new ArrayList<String>();
        
        for(FlightInfo f3001 : list){
            String flight_NO = f3001.getFlightNo();
            String orD = f3001.getaOrD();
            lists.add(flight_NO+"_"+orD);
        }
        
        hashMap.put("XX", lists);
        
        return hashMap;
        
    }

 

转载于:https://my.oschina.net/u/2615543/blog/688483