HTML代码:
1
2
3
4
5
6
7
8
9
|
<
div
style
=
"margin:0 auto; text-align:center;"
>
<
h3
>仿百度搜索输入框提示JS代码(基于jquery.autocomplete.js插件)</
h3
>
<
form
id
=
"formkeyword"
name
=
"formkeyword"
method
=
"post"
action
=
"post.php"
>
<
div
>
<
input
type
=
"text"
name
=
"keyword"
size
=
"40"
maxlength
=
"255"
value
=
""
id
=
"keyword"
></
input
>
<
input
type
=
"submit"
value
=
"搜索"
></
input
>
</
div
>
</
form
>
</
div
>
|
这是html的搜索框
JS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<link href=
"css/jquery.autocomplete.css"
type=text/css rel=stylesheet>
<script type=
"text/javascript"
src=
"js/jquery.js"
></script>
<script type=
"text/javascript"
src=
"js/jquery.autocomplete.js"
></script>
<script language=
"javascript"
>
$(document).ready(
function
() {
$(
"#keyword"
).autocomplete(
"getajaxtag.php"
,
{
delay:10,
minChars:1,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:
false
}
);
});
function
findValue(li) {
if
( li ==
null
)
return
alert(
"No match!"
);
if
( !!li.extra )
var
sValue = li.extra[0];
else
var
sValue = li.selectValue;
}
function
selectItem(li) { findValue(li);}
function
formatItem(row) {
return
row[0];
//return row[0] + " (id: " + row[1] + ")"//如果有其他参数调用row[1],对应输出格式Sparta|896
}
function
lookupAjax(){
var
oSuggest = $(
"#keyword"
)[0].autocompleter;
oSuggest.findValue();
return
false
;
}
</script>
|
Ajax获取后台数据库代码:
getajaxtag.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<?php
/**
* FILE_NAME:getajaxtag.php
* 接收到ajax参数,处理关键字,注意编码
*
* @copyright Copyright (c) 2010-2015 www.phpwebgo.com
* @author phpwebgo@gmail.com
* @package core
* @version 2010-7-31 下午03:06:35
*/
include_once
(
'conn/conn.php'
);
$keyword
= iconv (
'utf-8'
,
'GBK'
, js_unescape (
$_GET
[
'q'
] ) );
$sql
= mysql_query (
"SELECT DISTINCT(tagname) FROM uchome_tag WHERE tagname LIKE '%"
.
$keyword
.
"%' LIMIT 0,10"
);
while
(
$value
= mysql_fetch_array (
$sql
) ) {
echo
$keyword
= iconv (
'GBK'
,
'utf-8'
,
$value
[
'tagname'
] ) .
"n"
;
}
function
js_unescape(
$str
) {
$ret
=
''
;
$len
=
strlen
(
$str
);
for
(
$i
= 0;
$i
<
$len
;
$i
++) {
if
(
$str
[
$i
] ==
'%'
&&
$str
[
$i
+ 1] ==
'u'
) {
$val
= hexdec (
substr
(
$str
,
$i
+ 2, 4 ) );
if
(
$val
< 0x7f)
$ret
.=
chr
(
$val
);
else
if
(
$val
< 0x800)
$ret
.=
chr
( 0xc0 | (
$val
>> 6) ) .
chr
( 0x80 | (
$val
& 0x3f) );
else
$ret
.=
chr
( 0xe0 | (
$val
>> 12) ) .
chr
( 0x80 | ((
$val
>> 6) & 0x3f) ) .
chr
( 0x80 | (
$val
& 0x3f) );
$i
+= 5;
}
else
if
(
$str
[
$i
] ==
'%'
) {
$ret
.= urldecode (
substr
(
$str
,
$i
, 3 ) );
$i
+= 2;
}
else
$ret
.=
$str
[
$i
];
}
return
$ret
;
}
?>
|