自动补全 多输入, 适合新闻标签

  1 <script type="text/javascript">
  2 var ac_domain = ‘http://‘+document.domain+‘/‘;
  3 initAutoComplete();
  4 function initAutoComplete()
  5 {
  6     var ac_input = document.getElementById(‘auto_complete_input‘);
  7     if (!ac_input) {return false;}
  8     var ac_rebuildindex = document.getElementById(‘rebuild_autocomplete_index‘);
  9 
 10     if (document.attachEvent) {
 11         ac_input.attachEvent(‘oninput‘, input_autocomplete); //输入时进行自动补全
 12         // ac_input.attachEvent(‘onblur‘, hide_autocomplete); //鼠标点击其它地方隐藏div, 屏蔽 因为onblur 和 onclick 冲突
 13         ac_input.attachEvent(‘onfocus‘, input_autocomplete); //输入框重新获取焦点时显示自动补全结果
 14         ac_input.attachEvent(‘onkeydown‘, input_autocomplete_keydown); //处理按键信息
 15         ac_rebuildindex.attachEvent(‘onclick‘, rebuild_autocomplete_index);
 16     } else {
 17         ac_input.addEventListener(‘input‘, input_autocomplete); //输入时进行自动补全
 18         // ac_input.addEventListener(‘blur‘, hide_autocomplete); //鼠标点击其它地方隐藏div, 屏蔽 因为onblur 和 onclick 冲突
 19         ac_input.addEventListener(‘focus‘, input_autocomplete); //输入框重新获取焦点时显示自动补全结果
 20         ac_input.addEventListener(‘keydown‘, input_autocomplete_keydown); //处理按键信息
 21         ac_rebuildindex.addEventListener(‘click‘, rebuild_autocomplete_index);
 22     }
 23 
 24     $(document).bind("click",function(e){
 25         var target  = $(e.target);//表示当前对象，切记，如果没有e这个参数，即表示整个BODY对象
 26         if(target.closest(".form-input-autocomplete,#auto_complete_input").length == 0){
 27            hide_autocomplete();
 28         }
 29      })
 30 }
 31 
 32 function input_autocomplete()
 33 {
 34     var ac_input = document.getElementById(‘auto_complete_input‘);
 35     var userinput = ac_input.value;
 36     if (!userinput) {return false;}
 37     var arr_new_word = userinput.split(/,\s*/);
 38     var new_word = arr_new_word.pop();
 39 
 40     var url = ac_domain+‘chuanshuo/getAutoComplete?word=‘+new_word;
 41     $.get(url, 
 42         function(data) {
 43             if (!data) {return false;};
 44             var objGame = eval(‘(‘+data+‘)‘);
 45             html = ‘<ul>‘;
 46             for (var i in objGame) {
 47                 html += ‘<li class="auto_complete_li" data-id="‘+i+‘" data-name="‘+objGame[i]+‘">‘+objGame[i]+‘</li>‘;
 48             }
 49             html += ‘</ul>‘;
 50             var ac_div = $("#auto_complete_div");
 51             ac_div.show();
 52             ac_div.html(html);
 53             click_autocomplete_li(); //注册点击事件
 54         }
 55     );
 56 }
 57 
 58 function hide_autocomplete()
 59 {
 60     var ac_div = document.getElementById(‘auto_complete_div‘);
 61     ac_div.style.display = ‘none‘;
 62 }
 63 
 64 function click_autocomplete_li()
 65 {
 66     var arr_ac_li = getElementsByClassName(‘auto_complete_li‘, ‘ul‘);
 67     for (var i = 0; i < arr_ac_li.length; i++) {
 68         arr_ac_li[i].addEventListener(‘click‘, function () {
 69             //获取列表li上的数据, 并组装
 70             var data_id = this.getAttribute(‘data-id‘);
 71             var data_name = this.getAttribute(‘data-name‘);
 72             var data_info = data_id+‘|‘+data_name;
 73 
 74             //////向隐藏表单上写数据
 75             var already_complete_data = document.getElementById(‘auto_complete_data‘);
 76             var arr_already_data = already_complete_data.value.split(/,/);
 77             arr_already_data.push(data_info);
 78 
 79             //去重
 80             var hash_already_data = {};
 81             for (var i in arr_already_data) {
 82                 if (arr_already_data[i]) {
 83                     hash_already_data[arr_already_data[i]] = arr_already_data[i];
 84                 };
 85             }
 86             console.log(hash_already_data);
 87             arr_already_data = [];
 88             for (key in hash_already_data) {
 89                 arr_already_data.push(key);
 90             }
 91             //处理完毕, 写!
 92             var str_already_data = arr_already_data.join(",");
 93             document.getElementById(‘auto_complete_data‘).value = str_already_data;
 94 
 95 
 96             ///////向输入框写数据
 97             var already_input = document.getElementById(‘auto_complete_input‘);
 98 
 99             //去掉用户的输入, 换做用户点击的li里的name
100             var arr_already_input = already_input.value.split(/,\s*/);
101             arr_already_input.pop(); 
102             arr_already_input.push(data_name);
103 
104             //去重
105             var hash_already_input = {};
106             for (var i in arr_already_input) {
107                 hash_already_input[arr_already_input[i]] = arr_already_input[i];
108             }
109             arr_already_input = [];
110             for (key in hash_already_input) {
111                 arr_already_input.push(key);
112             }
113 
114             //回写入表单
115             var str_already_input = arr_already_input.join(", ");
116             document.getElementById(‘auto_complete_input‘).value = str_already_input+", ";
117 
118             hide_autocomplete();
119         })
120     };
121 }
122 
123 function rebuild_autocomplete_index()
124 {
125     var nodeParent = this.parentNode;
126     var url = ac_domain+‘chuanshuo/setAutoComplete‘;
127     $.get(url, 
128         function(data) {
129             nodeParent.innerHTML = ‘已经重建索引,再点击输入框试试‘;
130         }
131     );
132 }
133 
134 function input_autocomplete_keydown(e)
135 {
136     if (e.keyCode == 8) {
137         //document.getElementById(‘auto_complete_gid‘).value = 0;//按下删除键时,将gid也删除掉
138         input_autocomplete();
139     };
140 }
141 
142 function getElementsByClassName(className, tagName)
143 {
144     var t = typeof(document.getElementsByClassName);
145 
146     if (t == ‘function‘) {
147         return document.getElementsByClassName(className);
148     }
149 
150     var tags, matchedTags;
151     if (tagName) {
152         tags = document.getElementsByTagName(tagName);
153     } else {
154         tags = document.getElementsByTagName(‘*‘);
155     }
156 
157     matchedTags = [];
158     for (var i = 0; i < tags.length; i++) {
159         if (tags[i].className.indexOf(className) != -1) {
160             matchedTags.push(tags[i]);
161         }
162     }
163 
164     return matchedTags;
165 }
166 </script>
167 
168 <style type="text/css">
169     /*自动补全*/
170     .form-input-autocomplete {padding: 0px; width: 200px; border: 1px solid #aaa; display: none; z-index: 99; position: absolute; background-color: #fff; filter: alpha(opacity=100); opacity: 1;}
171     .form-input-autocomplete ul {margin: 0px;padding: 0px; text-align: left; list-style: none; font:15px;}
172     .form-input-autocomplete ul li{margin: 3px;}
173     .form-input-autocomplete ul li:hover{background-color: #eee; cursor:hand;}
174 </style>
175 
176 <?php
177 /*
178 <form action="<?= base_url(‘searchGameByName‘); ?>" method="post" class="form-box">
179     <div class="form-group">
180         <label class="form-label">关联游戏: </label>
181         <input id="auto_complete_input" autocomplete="off" type="text" name="gamename" value="<?= empty($gamename) ? ‘‘ : $gamename ?>" class="form-input">
182         <span class="form-tip"><a href="javascript:;" id="rebuild_autocomplete_index">没找到? 点这里试试</a></span>
183         <div class="form-input-autocomplete" id="auto_complete_div"></div>
184         <input id="auto_complete_gid" type="hidden" name="gid" value="<?= empty($gid) ? ‘‘ : $gid ?>">
185     </div>
186     <input type="submit" name="sub" value="搜索" class="btn btn-primary form-submit" />
187 </form>
188 */
189 ?>

1 <input name="tag" type="text" id="auto_complete_input" autocomplete="off" placeholder="新闻标签" value=""> &nbsp;<a href="javascript:;" id="rebuild_autocomplete_index">没找到? 点这里试试</a>
2                 <div class="form-input-autocomplete" id="auto_complete_div"></div>
3                 <input id="auto_complete_data" type="hidden" name="tag" value="">

 1     public function buildAutoComplete()
 2     {
 3         $key_pre = ‘autoComplete‘;
 4         $value_pre = ‘team_‘;
 5 
 6         //删除之前所有的旧值
 7         $this->redis->del($key_pre);
 8 
 9         //重新构建
10         $team = $this->redis->hgetall( ‘LeagueTeamsNames‘);
11 
12         $info = array();
13         foreach ($team as $lid => $jsonTeam) {
14             $arrTeam = json_decode($jsonTeam, true);
15             foreach ($arrTeam as $name => $tid) {
16                 $length = mb_strlen($name, ‘UTF-8‘);
17                 for ($i=0; $i < $length; $i++) {
18                     $strOne = mb_substr($name, $i, 1, ‘UTF-8‘);
19                     $value = $value_pre.$tid.‘_‘.$lid;
20                     $info[$strOne][$value] = $value; //懒得去重了
21                 }
22             }
23         }
24         $info_redis = array();
25         foreach ($info as $word => $ids) {
26             $a = array_values($ids);
27             $info_redis[$word] = json_encode($a);
28         }        
29         $this->redis->hmset($key_pre, $info_redis);
30         exit(‘over‘);
31     }
32 
33     public function getAutoComplete()
34     {
35         $word = common::request(‘word‘, ‘G‘);
36         $key_pre = ‘autoComplete‘;
37         $value_pre = ‘team_‘;
38 
39         if (empty($word)) {
40             exit(‘0‘);
41         }
42         $intWordLength = mb_strlen($word, ‘UTF-8‘);
43 
44         $arrId = array();
45         if (1 == $intWordLength) {
46             $jsonId = $this->redisSlave->hget($key_pre, $word);
47             $arrId = json_decode($jsonId, true);
48         } else {
49             for ($i=0; $i < $intWordLength; $i++) {
50                 $strOne = mb_substr($word, $i, 1, ‘UTF-8‘);
51                 $jsonIdTmp = $this->redisSlave->hget($key_pre, $strOne);
52                 $arrIdTmp = json_decode($jsonIdTmp, true);
53                 $arrIdTmp = $arrIdTmp ? $arrIdTmp : array();
54 
55                 $arrId = empty($arrId) ? $arrIdTmp : $arrId;
56                 $b = array_intersect($arrId, $arrIdTmp);
57                 
58                 $arrId = empty($b) ? $arrId : $b; // 新输入的词如果跟之前的没有交集, 就维持原来的交集不变
59             }
60         }
61 
62         $a = array();
63         $arrId = empty($arrId) ? array() : $arrId;
64         foreach ($arrId as $v) {
65             $id = ltrim($v, $value_pre);
66             $a[$id] = $v;
67         }
68 
69         $jsonGame = json_encode($a);
70         exit($jsonGame);
71     }