下拉提示输入框

• 一些奇奇怪怪的js,css

• 一个input框

• js代码

var availableTags = [ { label: "上海市 周杰伦 竹园小学", value: "value1" },{ label: "上海市 许嵩 古泉中学", value: "value2" }];

$(function() {

$( "#birds" ).autocomplete({

source: function( request, response ) {

$.getJSON( global.basePath + "article/get_article_name.do", {

term: request.term.split( /,\s*/ ).pop()

}, response );

}

});

});

source也可以是上面的写死数据，如果是动态数据，继续看下面，详情参考http://www.runoob.com/jqueryui/api-autocomplete.html

• 后台java代码

@RequestMapping("/get_article_name")

public void getArticleName(String term,HttpServletResponse response) throws Throwable{

List> articleName = new ArrayList<>();

if(StringUtils.isNotBlank(term)){

List availableTags = articleService.getArticleName(term);

for (Object[] o:availableTags) {

Map m = new HashMap<>();

m.put("label",o[0]);

m.put("value",o[1]);

articleName.add(m);

}

}

ResponseUtil.writeAsJson(response, articleName);

}

• 效果

更多效果参考链接：http://www.runoob.com/try/try.php?filename=jqueryui-example-autocomplete-multiple-remote

http://www.runoob.com/jqueryui/example-autocomplete.html