multiple entries into a textbox with (,) seperation

[naveenchary]

Hi,

I m new to ajax. I have to implemented the ajax autocomplete.When I press any alphabet say suppose "a", I should get all names starting with "a" say arman,anoop,anju etc one below other. now when i select one of them say 'arman' the text box will should display "arman,". Now when I press "a" again then it should show "anoop" & "anju" one below the other.As i want to enter multiple values with comma seperated.And when I select any one of this, it should append the the value previously present in text box(i.e it should append the value "arman").

 

Please reply to this...

I would be really thankful to u all..

Thanks.

[jackpf]

If you want to append it, you can just do

document.forms['whatever'].whatever.value += ', '+ajax.responseText;

or something like that.

[Ken2k7]

What kind of value does your PHP file return? Just a string?

[the182guy]

What you are describing is called "AJAX search suggest", there are many examples of how to do it at Google.

 

The only different between an ordinary Ajax search search suggest and what you want is the small modification to append the values to the textbox.

 

Why don't you get a normal Ajax search suggest up and running, then try to make the mods.

[naveenchary]

----------------------------------------------------------------------------------------------------------

function autocomplete(thevalue, e)

{

theObject = document.getElementById("autocompletediv");

theObject.style.visiblity = "visible";

theObject.style.width = "152px";

var posx = 0;

var posy = 0;

posx = (findPosX (document.getElementById("city")) + 1);

posy = (findPosY (document.getElementById("city")) + 23);

theObject.style.left = posx + "px";

theObject.style.top = posy + "px";

var theextrachar = e.which;

if(theextrachar == "undefined")

{ theextrachar = e.keyCode; }

var objID = "autocompletediv";

 

//take into account the backspace

if(theextrachar ==

{ if(thevalue.length == 1){

var serverpage = "list_cities.php";}

else{

var serverpage = "list_cities.php" + "?sstring=" + thevalue.substr(0,(thevalue.length -1)); }}

else {

var serverpage = "list_cities.php" + "?sstring=" + thevalue + String.fromCharCode(theextrachar);}

var objXML = createXMLHttpRequest();

var obj = document.getElementById(objID);

obj.style.visibility = "visible";

objXML.open("GET", serverpage);

 

objXML.onreadystatechange = function()

{

if (objXML.readyState == 4 && objXML.status == 200)

{obj.innerHTML = objXML.responseText;}

}

objXML.send(null);

}

 

function setvalue (thevalue)

{

acObject = document.getElementById("autocompletediv");

acObject.style.visibility = "hidden";

acObject.style.height = "0px";

acObject.style.width = "0px";

document.getElementById("city").value = thevalue;

 

}

----------------------------------------------------------------------------------------------------------

the above is my javascript code

----------------------------------------------------------------------------------------------------------

<div>Enter text here<INPUT type="text" name="clocation" size="27" onkeypress="autocomplete(this.value, event)" id="city"></div>

<div id="autocompletediv" class="autocomp"></div>

----------------------------------------------------------------------------------------------------------

this is my html code for calling the javascript function

----------------------------------------------------------------------------------------------------------

and the below is the php code

----------------------------------------------------------------------------------------------------------

<?php

$names = array('anil','anoop','bhuvan','bhavana','chandu','chinna','deepa','deepak','funny','gauri','hari','imran','ismail','jim','kiran','lavanya','maney','naveen','oswin','praveen','qaran','ravi','satish','teena','uma','varun','yasir','zaheer');

$foundarr = array ();

 

//Go through the names array and load any matches into the foundarr array.

if ($_GET['sstring'] != "")

{

for ($i = 0; $i < count ($names); $i++)

{

if (substr_count (strtolower ($names[$i]), strtolower ($_GET['sstring'])) > 0)

{

$foundarr[] = $names[$i];

}}}

//If we have any matches.

if (count ($foundarr) > 0)

{

  //Then display them.

  ?>

<div style="background: #FFFFFF; border-style: solid; border-width: 1px; border-color: #000000;">

<?php for ($i = 0; $i < count ($foundarr); $i++){?>

<div style="padding:4px; height:14px;" onmouseover="this.style.background = '#FF0033'" onmouseout="this.style.background = '#FFFFFF'" onclick="setvalue ('<?php echo $foundarr[$i];?>')">

<?php echo $foundarr[$i]; ?>

</div>

<?php } ?>

</div>

<?php }?>

 

----------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

[Ken2k7]

Please read rule #13 - http://www.phpfreaks.com/page/forum-rules