Autocomplete Using PHP

AutocompleteusingPHP/MySQLandjQuery
AliAboussebabaMay11,2014
Hi,anewtutorialexplainhowtoimplimentanautocompleteusingPHP/MySQLandjQueryisavailable.
Inthistutorialwllfocusontheautocompletefunctionalityusingasingletableinthedatabaseanda
singleinputtextinthewebpage.Whenwetypealetter,alistofpropositioncontainningthekeyword
willbedisplayedwiththekeywordinbold.
1.Structure
/css:containtheCSSfiles
/js:containtheJavaScriptfiles
/images:containallimages
2.Database
Createanewdatabasenamedautocomplet,andimporttheSQLscriptinmainfolder,orcopy/paste
thescriptbellow:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
SETSQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SETtime_zone="+00:00";
Database:`autocomplete`
Tablestructurefortable`country`
CREATETABLEIFNOTEXISTS`country`(
`country_id`int(11)NOTNULLAUTO_INCREMENT,
`country_name`varchar(100)COLLATEutf8_unicode_ciNOTNULL,
PRIMARYKEY(`country_id`)
)ENGINE=InnoDBDEFAULTCHARSET=utf8COLLATE=utf8_unicode_ciAUTO_INCREMENT=45;
Dumpingdatafortable`country`
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
INSERTINTO`country`(`country_id`,`country_name`)VALUES
(1,'china'),
(2,'unitedstates'),
(3,'india'),
(4,'japan'),
(5,'brazil'),
(6,'russia'),
(7,'germany'),
(8,'nigeria'),
(9,'unitedkingdom'),
(10,'france'),
(11,'mexico'),
(12,'southkorea'),
(13,'indonesia'),
(14,'philippines'),
(15,'egypt'),
(16,'vietnam'),
(17,'turkey'),
(18,'italy'),
(19,'spain'),
(20,'canada'),
(21,'poland'),
(22,'argentina'),
(23,'colombia'),
(24,'iran'),
(25,'southafrica'),
(26,'malaysia'),
(27,'pakistan'),
(28,'australia'),
(29,'thailand'),
(30,'morocco'),
(31,'taiwan'),
(32,'netherlands'),
(33,'ukraine'),
(34,'saudiarabia'),
(35,'kenya'),
(36,'venezuela'),
(37,'peru'),
(38,'romania'),
(39,'chile'),
(40,'uzbekistan'),
(41,'bangladesh'),
(42,'kazakhstan'),
(43,'belgium'),
(44,'sweden');
3.Files
index.php
Thisisthemainfile,itwillbedisplayedonthefirstview:
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.
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1
transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="ContentType"content="text/html;charset=utf8"/>
<title>AutocompleteusingPHP/MySQLandjQuery</title>
<linkrel="stylesheet"href="css/style.css"/>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/script.js"></script>
</head>
<body>
<divclass="container">
<divclass="header">
<imgsrc="images/BeWebDeveloper.png"/>
</div><!header>
<h1class="main_title">AutocompletusingPHP/MySQLandjQuery</h1>
<divclass="content">
<form>
<divclass="label_div">Typeakeyword:</div>
<divclass="input_container">
<inputtype="text"id="country_id"onkeyup="autocomplet()">
<ulid="country_list_id"></ul>
</div>
</form>
</div><!content>
<divclass="footer">
Poweredby<ahref="#">bewebdeveloper.com</a>
</div><!footer>
</div><!container>
</body>
</html>
ajax_refresh.php
ThisfilewillbeexecutedusingajaxwithjQueryeverytimewetypealetter,itconnecttothedatabase
andselectthestatementscontainningthekeyword.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<?php
//PDOconnect*********
functionconnect(){
returnnewPDO('mysql:host=localhost;dbname=autocomplet','root','',array(PDO::ATTR_ERRMODE=>
PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_INIT_COMMAND=>"SETNAMESutf8"));
}
$pdo=connect();
$keyword='%'.$_POST['keyword'].'%';
$sql="SELECT*FROMcountryWHEREcountry_nameLIKE(:keyword)ORDERBYcountry_idASCLIMIT0,10";
$query=$pdo>prepare($sql);
$query>bindParam(':keyword',$keyword,PDO::PARAM_STR);
$query>execute();
$list=$query>fetchAll();
foreach($listas$rs){
//putinboldthewrittentext
$country_name=str_replace($_POST['keyword'],'<b>'.$_POST['keyword'].'</b>',$rs['country_name']);
//addnewoption
18. echo'<lionclick="set_item(\''.str_replace("'","\'",$rs['country_name']).'\')">'.$country_name.'</li>';
19. }
20. ?>
script.js
ThisistheJavaScriptfile
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.
//autocomplet:thisfunctionwillbeexecutedeverytimewechangethetext
functionautocomplet(){
varmin_length=0;//mincaracterstodisplaytheautocomplete
varkeyword=$('#country_id').val();
if(keyword.length>=min_length){
$.ajax({
url:'ajax_refresh.php',
type:'POST',
data:{keyword:keyword},
success:function(data){
$('#country_list_id').show();
$('#country_list_id').html(data);
});
}else{
$('#country_list_id').hide();
}
}
//set_item:thisfunctionwillbeexecutedwhenweselectanitem
functionset_item(item){
//changeinputvalue
$('#country_id').val(item);
//hidepropositionlist
$('#country_list_id').hide();
}
style.css
ThisistheCSSfile,itcontainthedesignstyles
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
*{
margin:0;
padding:0;
}
body{
padding:10px;
background:#eaeaea;
textalign:center;
fontfamily:arial;
fontsize:12px;
color:#333333;
}
.container{
width:1000px;
height:auto;
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.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
background:#ffffff;
border:1pxsolid#cccccc;
borderradius:10px;
margin:auto;
textalign:left;
}
.header{
padding:10px;
}
.main_title{
background:#cccccc;
color:#ffffff;
padding:10px;
fontsize:20px;
lineheight:20px;
}
.content{
padding:10px;
minheight:100px;
}
.footer{
padding:10px;
textalign:right;
}
.footera{
color:#999999;
textdecoration:none;
}
.footera:hover{
textdecoration:underline;
}
.label_div{
width:120px;
float:left;
lineheight:28px;
}
.input_container{
height:30px;
float:left;
}
.input_containerinput{
height:20px;
width:200px;
padding:3px;
border:1pxsolid#cccccc;
borderradius:0;
}
.input_containerul{
width:206px;
border:1pxsolid#eaeaea;
position:absolute;
zindex:9;
background:#f3f3f3;
liststyle:none;
}
.input_containerulli{
padding:2px;
}
74.
75.
76.
77.
78.
79.
.input_containerulli:hover{
background:#eaeaea;
}
#country_list_id{
display:none;
}

Autocomplete Using PHP

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Autocomplete Using PHP

Transféré par

Droits d'auteur :

Formats disponibles

AutocompleteusingPHP/MySQLandjQuery

Vous aimerez peut-être aussi