模糊查询自动补全（网页显示）

最新推荐文章于 2022-09-01 00:14:57 发布

你照亮了我的世界

最新推荐文章于 2022-09-01 00:14:57 发布

阅读量266

点赞数

分类专栏：开发笔记

本文链接：https://blog.csdn.net/weixin_44196699/article/details/104599846

版权

开发笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

模糊查询自动补全

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<%--<script src="js/autocomplete.css"></script>
<script src="js/autocomplete.min.js"></script>--%>
<!-- 引入jQuery UI的css文件 -->
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css"/>
<%--<link href="js/jquery-ui.css"/>--%>
<!-- 引入jQuery的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- 引入jQuery UI的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


<html>
<head>
    <title>Title</title>
    <style>
        .ui-autocomplete {
            z-index:99999;
            max-height: 100px;
            overflow-y: auto;
            /* 防止水平滚动条 */
            overflow-x: hidden;
            width: 120px;
            list-style-type: none;
            font-family: "微软雅黑";
           background-color: #ebfcff;

        }
        * html .ui-autocomplete {
            height: auto;
        }
    </style>

</head>
<body>
<div>
    <table border="1px">
        测试 <%-- <input id="language" name="language" type="text" onblur="return showList()"/>--%>
        <input type="hidden" name="providerid">
        <input type="text" name="providerName" id="providername"  />
    </table>
</div>
</body>
<script type="text/javascript">
    $(function () {

        $("tr:even").css("background", "#ccc");
        $("tr:odd").css("background", "red");


        $("#language").autocomplete({
            source: [
                "米饭",
                "English",
                "Spanish",
                "Russian",
                "French",
                "Japanese",
                "Korean",
                "German"
            ]
        });

        applymentAutoComplete("input[name='providerName']");
    })

    function applymentAutoComplete(objname) {
        $(objname).autocomplete({
            messages: {
                noResults: '',
                results: function() {}
            },
            source: function (request, response) {
                $.ajax({
                    url: "ajax",
                    type: "post",
                    data: {'name': $("#providername").val()},
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    success: function (data) {
                        var jsondata = [];
                        for (var i = 0; i < data.length; i++) {
                            //声明一个字符对象，用来存所需要的值
                            var providerinfo = {};
                            //这里只能填写id和value。不能换成其他字符串
                            //和下面的jquery选择器选择的内容对应
                            providerinfo.id = data[i].id;

                            providerinfo.value = data[i].name;
                            jsondata.push( providerinfo);
                        }
                        response(jsondata);
                    },
                });
            },
            minLength: 1,
            autoFocus:true,
            delay: 10,
            select: function (event, ui) {
                $(this).value = ui.item.value;
                $("input[name='providerid']").val(ui.item.id);
                $("input[name='providerName']").val(ui.item.value);
                //阻止事件的默认行为
                event.preventDefault();
            }

        });
    }

</script>
</html>