2015年5月12日 20:16:48 星期二
js+css
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 ?>
html
1 <input name="tag" type="text" id="auto_complete_input" autocomplete="off" placeholder="新闻标签" value=""> <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="">
php (php+redis:hash)
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 }
时间： 2024-10-14 11:40:01