拼音搜索，在下拉框出现候选词

 

主要是用 jquery-ui的库

主要是jquery-ui 的库，和jquery.js

<link rel="stylesheet" href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link href="${APP_PATH}/static/js/bootstrap-datetimepicker.min.4.17.47.css" rel="stylesheet"/>
<script src="${APP_PATH}/static/js/bootstrap-datetimepicker.min.4.17.47.js"></script>
<!-- 引入jQuery UI的css文件 -->
<link rel="stylesheet" href="${APP_PATH}/static/jquery-ui/jquery-ui-1.10.4-smoothness.css">
<!-- 引入jQuery UI的js文件 -->
<script type="text/javascript" src=${APP_PATH}/static/jquery-ui/jquery-ui-1.10.4.js ></script>

 

这里用的了一个轮询的组，来显示菜品项

<c:forEach var="i" begin="1" end="${ordersNums}">
    <div class="form-group">
        <label for="item" class="col-sm-1 control-label">品名${i}</label>
        <div class="col-sm-3">

            <input type="text" class="form-control" name="item" id="pinyin${i}" placeholder="拼音首字母">    // 这段为重点
        </div>
</c:forEach>

 

js调用  

<script>
        $(function() {
            $("#pinyin${i}").autocomplete({
                source: "${APP_PATH}/pinyinFind2",          // 调用js，没加上参数，默认参数名为term，见下一段code
            });
        });
    </script>

 

java后台控制器，默认回传的参数为 term，需要指定一下。

/***
     * 搜索 key，提示自动填充 不显示父类,ajax 页面
     * @param key
     * @return
     */
    @ResponseBody
    @RequestMapping("/pinyinFind2")
    @Cacheable(cacheNames = "ItemFind",key = "'key:'+#key")
    public List<String> pinyinFind2(@RequestParam("term") String key) {
        List<Item> pinyin = this.itemService.list(new QueryWrapper<Item>().like("pinyin", key));
        List<String> ls = new ArrayList<>();
        for (Item item : pinyin) {
            if (item.getPid() != 0) {
                ls.add(item.getItemName());     // 显示单一的名字，并返回。
            }
        }
        return ls;
    }