Jquery实现自动提示magicsuggest-min.js实例

1548年前 (2017-07-28)javaScript3528

效果图：

1.引入外部js、css:

     <script src="${root!}/resource/js/plugins/magic_suggest/magicsuggest-min.js"></script>
     <link href="${root!}/resource/css/plugins/magic_suggest/magicsuggest-min.css" rel="stylesheet">

2.html页面部分：

     <input type="text" class="form-control" id="scenic" name="model.F_SCENIC" placeholder="请选择景区" required="">

3. js部分：

     var magic2 = null;
$(function() {
    getView('scenic', '003', '');   
});
function getView(id, STYLE, view) {
     magic2 = $("#"+id).magicSuggest({
        queryParam: 'searchText',
        minChars: '2',
        resultsField: 'list',
        queryParam: 'searchText',
        allowFreeEntries: false, //如果你不需要用户自已创建标签，则用这个
        displayField: 'P_NAME',
        valueField: 'P_ID',
        renderer:function(v){
            return '<div class="row"><div class="col-sm-5">'+v.P_NAME+'</div><div class="col-sm-7">'+v.P_ADDRESS+'</div></div>';
        }
    });

    $(magic2).on('expand',
        function(e, cb) {
            cb.setData('${root!}/admin/sys/poi/listName?sortName=P_NAME&P_STYLE=' + STYLE + '&view=' + view);
        });
    $(magic2).on('selectionchange',//选中一条记录后操作
           function(e, cb) {
                   $.post("${root!}/admin/sys/poi/setWeight?id="+cb.getValue(),function(data,status){
                         });//增加权重
           });                                                 
        

}

4.后台类方法实现：

//多个pid 查询对应名称
   public void listName() {
       PoiService svc = new PoiService();
       String view = getPara("view");
       System.out.println("view=="+getPara("view"));
       List list = new ArrayList();
               renderJson(svc.list2(getPara("searchText"),getPara("P_STYLE"),view));
   }

PoiService类方法：

 public List list2(String searchTex,String P_STYLE,String view) {
        StringBuffer sqlBuffer  = new StringBuffer();
        StringBuffer where = new StringBuffer();
        List<Object> param = new ArrayList<Object>();
        System.out.println("searchTex==="+searchTex+"P_STYLE=="+P_STYLE);
        if(Tools.nullToSpace(searchTex).length()>0){
            where.append(" AND D.P_NAME LIKE ?");
            param.add("%" + searchTex + "%");
            
        }
        where.append(" AND D.P_STYLE = ?");
        param.add(P_STYLE);
        sqlBuffer.append("select * from(");
        //编辑时，查询已有的数据
        if(Tools.nullToSpace(view).length()>0){
            sqlBuffer.append("  SELECT D.P_ID,D.P_BDLNG,D.P_BDLAT ,D.P_NAME,P_ADDRESS,P_TELEPHONE," +
                    "P_TYPE,P_AREAID,P_WEIGHT FROM T_SYS_POI D WHERE D.P_ID IN ("+view+") UNION "
                            + "");// ORDER BY D.P_WEIGHT DESC
        }
        //添加时候，按权重查询
        sqlBuffer.append("select * from(");
            sqlBuffer.append("SELECT D.P_ID,D.P_BDLNG,D.P_BDLAT ,D.P_NAME,P_ADDRESS,P_TELEPHONE," +
                    "P_TYPE,P_AREAID,P_WEIGHT FROM T_SYS_POI D where 1=1 "  + where.toString()
                            + " order by D.P_WEIGHT DESC) WHERE ROWNUM <= 25 )");
        
    
        System.out.println("sqlBuffer.toString()==="+sqlBuffer.toString());
        List<T_SYS_POI> list = T_SYS_POI.dao.find(sqlBuffer.toString(),param.toArray() );
        return list;
    }