关于jquery ui auto complete自动填充

最新推荐文章于 2022-07-12 17:36:22 发布

chikuang0023

最新推荐文章于 2022-07-12 17:36:22 发布

阅读量334

点赞数

文章标签： ui javascript xhtml ViewUI

原文链接：https://my.oschina.net/passer007/blog/675929

版权

好久没有写博客了，前几天想写突然发现前段时间的东西没有记录下来。于是今天完成了一个小功能记录下来

实现如同百度的输入框联想：

前端展示界面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>注册公司自动匹配</title>
<link href="/auto/jquery-ui.css" />
<!-- 引入jQuery的js文件 -->
<script type="text/javascript" src="/auto/jquery-1.9.1.js" ></script>
<!-- 引入jQuery UI的js文件 -->
<script type="text/javascript" src="/auto/jquery-ui.js" ></script>
</head>
<body>
    <div style="margin:20px 50px;">
        <input id="txtSearchKey" name = "txtSearchKey" type="text" class="text ui-widget-content ui-corner-all" style="width:250px; height:30px;" />
        <br><input type = "text" name ="companyid" id = "companyid"/>
        <input id="btnSubmit" type="button" class="ui-button ui-widget ui-state-default ui-corner-all" value="搜索" />
    </div>
    <script type="text/javascript">
        $(function() {
            $("#txtSearchKey").autocomplete(
            {
                source: function(request, response) {
                    $.ajax({
                        url: "/chuqq/index.php/company/auto",
                        dataType: "json",
                        data: {
                            top: 10,
                            key: request.term
                        },
                        success: function(data) {
                            response($.map(data.companylist, function(item) {
                                return { label: item.name, value: item.name ,id: item.id }
                            }));
                        }
                    });
                },
　　　　　　　　　 select: function(event, ui) {
                    //提交搜索...
                },
                minLength: 2, 
                autoFocus: false, 
                delay: 500 
            });
        });
    </script>
</body>
</html>

后台处理程序：完成

        //自动匹配公司  
        public function auto(){
                 $key = isset($_GET['key']) ? $_GET['key'] : '';
                 $sql = "select * from company where name like '%$key%'";
                 $companys = $this->company_model->getQuery($sql);
                 $res = array("companylist"=>$companys);
                 echo json_encode($res);
        }

转载于:https://my.oschina.net/passer007/blog/675929

chikuang0023

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于jquery ui auto complete自动填充

好久没有写博客了，前几天想写突然发现前段时间的东西没有记录下来。于是今天完成了一个小功能记录下来实现如同百度的输入框联想：前端展示界面： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/...
复制链接

扫一扫