Jump to content

dropdown for search suggestions with prompting


niche
 Share

Recommended Posts

Is there an example on w3shools that demonstrates a drop down box that could fit under a input box like: http://www.w3schools.com/php/php_ajax_php.asp ?EDIT: Where the suggestions in the drop down can be based on the prompting from the input box?

Edited by niche
Link to comment
Share on other sites

I don't know if there's an example on W3Schools, but modifying the example you linked would not be that hard.Instead of echoing a comma delimited string, echo a JSON array of each 'hint'. You can Google JSON if you don't know what that is.When you return the JSON string to JavaScript (you'll have to use eval to turn it into an array) you can just loop through each element of the resulting array and generate an <option> element that you would append to your select. This page shows you how to add options to a select element.

Link to comment
Share on other sites

Option elements go inside a select element, so you put the select element wherever you want and then add the options to it. If you're talking about showing a list of options that look like a dropdown but isn't an actual select element then you'll need to get the size and position of the text box and add a floating div or span below it that you can write links in or something like that to click and select the item.

Link to comment
Share on other sites

I've played around with this for awhile and I don't understand how to work the onchange event handler into <select> and how that's going to get what's selected into the input box. Can you show me please?

Link to comment
Share on other sites

How do you do that for each value selected by the php script, based on the scripts at: http://w3schools.com/php/php_ajax_php.aspif i enter a "v", the current php script immediately creates a comma delimited string. Am I better off processing the string to create options for the drop down in the php or in the javascript? Would this answer affect how I'd use your last post?

Edited by niche
Link to comment
Share on other sites

OK. I just read the JSON tutorial on w3schools and can see things coming together. Is there a php function to create a json array or will I have to write a script to do that?Then, how do I use the data in the json array to create drop down options?I'm still unclear about how to connect the drop down options to the input field.

Edited by niche
Link to comment
Share on other sites

There's json_encode if your version of PHP supports it. Otherwise you'll have to write a custom function. You can probably find one on Google, or, if you like, I can provide you with a copy of the one I wrote.Anyway, you have PHP echo the JSON string. When that's returned to JavaScript, you'll need to use eval to turn it into a JavaScript array. So inside the onreadystatechange function you'll have something like this:var opts = eval(xmlhttp.responseText);The opts variable will now be a regular JavaScript array (assuming a valid JSON string was returned). Using a loop, you can turn each element in opts into an option tag. Something like:

for (var x=0; x<opts.length; x++) {   var newOpt = document.createElement('option');   newOpt.value = opts[x];   newOpt.text = opts[x];   //...rest of code to add newOpt to the select element...}

You can use the link I provided you before on how to add each option to the select.To populate your input box, you'll use the code I posted in post #7 and put that in an onchange handler and bind that handler to the select element.

Edited by ShadowMage
Link to comment
Share on other sites

I'm having trouble getting the comma delimited text into a format that will work with json_encode(). What do I need to change?

//$response is the comma delimited string which is: Bob , Brittany , Brian$response = explode(",",$response);$response2=  "'" . "a" . "'=>" . $response[0];  $response2 = array($response2);$response2 = json_encode($response2);   //output the responseecho var_dump($response2);//echo ($response2);

Link to comment
Share on other sites

You need to pass an array to json_encode. Instead of adding each hint to the string add it to an array:

$hint = array();for($i=0; $i<count($a); $i++) {	if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {		hint[] = $a[$i];	}}

Then pass $hint to json_encode and you should get a JSON string.EDIT: I guess you are actually passing an array, but it's only got one element in it. $response2 looks something like this:

array(   [0] => string(8) "'a'=>Bob")

You could just pass $response to json_encode (after exploding it) and you would achieve the desired results, but creating an array to start with (like I showed you above) is going to be more efficient.

Edited by ShadowMage
Link to comment
Share on other sites

my snippet produces ["'a' => Bob "] not {"a":Bob}your snippet produces ["Bob","Brittany","Brian"] I wasn't able to get the right quotes, among other things. what needs to change?My snippet

$response = explode(",",$response);$response2=  "'" . "a" . "' => " . $response[0];// . ", "b"=>" . $response[1] ;   $response2 = array($response2);echo json_encode($response2);   

Your snippet

$hint = array();for($i=0; $i<count($a); $i++) {    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {        $hint[] = $a[$i];    }}echo json_encode($hint); 

Link to comment
Share on other sites

Finally got it! I have the json array: {"a":"Bob","b":"Brittany"}What's next? What do I do to the json array to create a selectable drop down box that is able to fill its input field?

Link to comment
Share on other sites

This is actually what you want:["Bob","Brittany","Brian"]Or, if you want it as a property of an object:{"hints": ["Bob","Brittany","Brian"]}That is just a normal indexed array that you can use a for loop to go through in Javascript. This:{"a":"Bob","b":"Brittany"}produces an object, not an array, that you have to reference by property name. So you need to know that there is a property called "a", and "b", etc. With an array you just loop through it.

Link to comment
Share on other sites

OK. What do I do with it? I've been working the php and have created a div wrapper, under the the input field, with anchors in the div, but I don't know how to get the anchor values into the input field.Please let me know if you have something else in mind. Obviously, what I just described isn't making use of the json array.

Link to comment
Share on other sites

You should loop through the array in Javascript to create the links in the div. The div should start empty, in fact the script can create the div also before it fills it with links. You can use document.createElement to create elements like that and use element.appendChild to add them to other elements. The links should have a click event handler that gets the value that was in the array and puts it into the other field.

var hint_text = 'Some name';var div = document.createElement('div');div.style.display = 'absolute';div.style.left = '500px';div.style.top = '200px';div.style.width = '100px';div.style.height = '100px';div.style.backgroundColor = '#fff';div.setAttribute('id', 'link-container');document.getElementsByTagName('body')[0].appendChild(div);var a = document.createElement('a');a.setAttribute('rel', hint_text);a.onClick = function(){  document.getElementById('hint').setValue(this.getAttribute(rel));  document.getElementsByTagName('body')[0].removeChild(div);  }div.appendChild(a);

  • Like 1
Link to comment
Share on other sites

regarding post #19, There's a lot in it I've never used before. Why are you using createElement? I'm unfamiliar with it and am having trouble the concept even after the tutorial. Maybe it will sink in better overnight.

Edited by niche
Link to comment
Share on other sites

would it still be connected to php? if so how?
Only in that Javascript gets the array data from PHP. You would loop through that array and create one <a> element for each item in the array, and put them all in the div.
Why are you using createElement?
Because I need to create elements and assign things like click handlers to them. That's how you create elements.
Link to comment
Share on other sites

  • 4 weeks later...

This may be too simple for what you are doing, but I have used the following code in a form to show the list of categories from the database category table in order to select one and insert it into a membership table in the database. Once the form is submitted, the information is inserted using INSERT INTO. $cat = @mysql_query('SELECT category_name, category_id FROM category ORDER BY category_name'); if (!$cat) { exit( '<p>Unable to obtain categories from the database.</p>'); }<h3>Select one category from drop-down list</h3><select name="category" size="1"> <option selected value="">Select Category</option><?php while ($row_ct = mysql_fetch_array($cat)) {$category_name = $row_ct['category_name']; echo "<option value='$category_name'>$category_name</option>\n"; } ?> </select><br />

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...