autocomplete in php

[xuexue]

could you give me a very simple example of autocomplete in php?
this should have a connection to the database..
having the keydown() function and highlights the letters
which are similar to the one being typed.

best regards and thanks in advance..^^

[saiprem]

There are plenty of beautiful sites which will provides autocomplete functionality

check the following example
http://www.exploremyblog.com/html/blog_contents.php?blogid=300

http://www.ajaxdaddy.com/demo-jquery-autocomplete.html

[xuexue]

how could i make the inputted text bold in the autocomplete box?

tnx tnx..

this is my css..

/*--Reset styles --*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}


/*-- layout and form styles --*/
body {background-color: #efefef;font-family: "Trebuchet MS",sans-serif;font-size: 1.0em; color: #006}
h1,h2,p,form {padding: 5px;}
h1,h2{font-size: 18px;}

.ui-widget{font-family: "Arial",sans-serif;font-size:24px;}

[saiprem]

Add the following script in your stylesheet

.inputbox{
	color:#000;
	font-weight:bold;
}

and add class to your textbox, some thing like
<input type="text" class="inputbox" />
:icon_cool:

how could i make the inputted text bold in the autocomplete box?

tnx tnx..

this is my css..

/*--Reset styles --*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}


/*-- layout and form styles --*/
body {background-color: #efefef;font-family: "Trebuchet MS",sans-serif;font-size: 1.0em; color: #006}
h1,h2,p,form {padding: 5px;}
h1,h2{font-size: 18px;}

.ui-widget{font-family: "Arial",sans-serif;font-size:24px;}

[xuexue]

sir i got your answer..what i mean is it possible that the only text to be bold
is the one inputted in the textbox, not the whole data..
tnx tnx

[saiprem]

Show me your example in live, so I will say you how to do.

Usually you need to change the style of the selected box onMouseOver
onMouseOver set to bold
and
onMouseOut set to normal

OR

create 2 classes
one for bold and the other for normal
change the classes onmouseover and onmouseout. If it is link then use onhover

sir i got your answer..what i mean is it possible that the only text to be bold
is the one inputted in the textbox, not the whole data..
tnx tnx

[xuexue]

this is my code..

***************style.css

/*--Reset styles --*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
body
{
	line-height:1
}
ol,ul
{
	list-style:none
}
blockquote,q
{
	quotes:none
}
blockquote:before,blockquote:after,q:before,q:after
{
	content:'';content:none
}:
focus
{
	outline:0
}
ins
{
	text-decoration:none
}
del
{
	text-decoration:line-through
}
table
{
	border-collapse:collapse;
	border-spacing:0
}


/*-- layout and form styles --*/
body 
{	
	background-color: #efefef;
	font-family: "Trebuchet MS",sans-serif;
	font-size: 1.0em; 
	color: #006;
}
h1,h2,p,form 
{
	padding: 5px;
}
h1,h2
{
	font-size: 18px;
}

.ui-widget
{
	font-family: "Arial",sans-serif;
}

this one is for the input

<input type="text" id="lastname"  name="lastname" class="ui-widget" />

[omoabobade]

guy you can try out jquery UI library it has something and you can also edit to suit want you. just google Jquery UI library

[saiprem]

Give me your working code in live URL, so that I can check the class what it is implementing for textbox.
otherwise use firebug to check what class is implementing for that textbox.
and change the styles to it.

this is my code..

***************style.css

/*--Reset styles --*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
body
{
	line-height:1
}
ol,ul
{
	list-style:none
}
blockquote,q
{
	quotes:none
}
blockquote:before,blockquote:after,q:before,q:after
{
	content:'';content:none
}:
focus
{
	outline:0
}
ins
{
	text-decoration:none
}
del
{
	text-decoration:line-through
}
table
{
	border-collapse:collapse;
	border-spacing:0
}


/*-- layout and form styles --*/
body 
{	
	background-color: #efefef;
	font-family: "Trebuchet MS",sans-serif;
	font-size: 1.0em; 
	color: #006;
}
h1,h2,p,form 
{
	padding: 5px;
}
h1,h2
{
	font-size: 18px;
}

.ui-widget
{
	font-family: "Arial",sans-serif;
}

this one is for the input

<input type="text" id="lastname"  name="lastname" class="ui-widget" />

[jkon]

There are two views for auto complete. The first one is that I know that there are limited options so I have a javascript that has an array, php complete it and when user press something array is searched with onchange or onkeyup.

And if the limit option is unknowable or too high to use the previous method you must use AJAX with a PHP programme standing in the asynchronous for the request. Of course If you decide the second one (that it is rather a good juice for large scaled projects) you should consider about security holes.

[xuexue]

sir, my code is only located in localhost..
because im only trying to perfect it or style it the way i wanted.