检索框文字联想功能

最新推荐文章于 2022-11-04 09:51:26 发布

grapemlin

最新推荐文章于 2022-11-04 09:51:26 发布

阅读量910

点赞数

分类专栏：小功能文章标签：文字联想

本文链接：https://blog.csdn.net/jmlxx/article/details/79641413

版权

小功能专栏收录该内容

28 篇文章 0 订阅

订阅专栏

强调内容
会传递参数q到控制器

function hospital_query($q){
        $arr = array();
        $arr['suggestions'] = array();
        $arr['query'] = $q;
        $arr['data'] = array();
        if(empty($q)){
            return json_encode($arr);
        }else{
            $result = $this->db->query("SELECT  hospitalid,name FROM ".$this->table." WHERE parentid>-1 AND name LIKE  "."'%$q%'". " LIMIT 50");
            while($r = $this->db->fetch_array($result))
            {
                $arr['suggestions'][] = $r[name];
                $arr['data'][] = $r[hospitalid];
            }
            $this->db->free_result($result);
            return  json_encode($arr);
        }

引用块内容
这里面的三个加粗需要传递的参数，不可少

<style>
                        /*autocomplete*/
                        .autocomplete-w1 { position:absolute; top:0px; left:0px; margin:12px 0 0 4px;
                            /* IE6 fix: */ _background:none; _margin:0; }
                        .autocomplete {font:14px/1.5  Arial; border:1px solid #999; background:#FFF;
                            cursor:default; text-align:left; max-height:200px; overflow:auto; margin:-8px 6px 6px -5px;
                            /* IE6 specific: */ _height:200px;  _margin:0; _overflow-x:hidden; }
                        .autocomplete .selected { background:#F0F0F0; }
                        .autocomplete div { padding:1px 10px; white-space:nowrap; }
                        .autocomplete strong { font-weight:normal; color:#3399FF; }

                        /*autocomplete*/
                        .autocomplete-w1 {  position:absolute; top:0px; left:0px; margin:9px 0 0 0;}

                    </style>

                加上这个下拉列表样式

html

<span class="w76">
                        医院：<input name="keyword" id="keyword" type="text"  class="" autocomplete="off" >
                        <input id="cur_hospital_id" type="hidden"  name="info[bi_hospital_id]">
                    </span>

<script type="text/javascript" src="<?=PATH_JS?>/jquery.autocomplete-min.js"></script>
                    <script>
                        hospital = [];
                        //医院筛选
                        jQuery(function() {
                            var opt_q = {
                                serviceUrl: '?hospital_query',
                                minChars:1,
                                width: 532,
                                maxHeight:215,
                                deferRequestBy: 0,
                                noCache: false,
                                onSelect: function(value, data){
                                    document.getElementById('keyword').value = value;
                                    document.getElementById('cur_hospital_id').value = data;
                                }
                            }

                            $("#keyword").autocomplete(opt_q);
                        });

                    </script>