Jump to content
Sign in to follow this  
niche

dropdown for search suggestions with prompting

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

how do I position the <option> tags beneath the input box?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

That makes sense. Thanks.Then, how does the option get placed into the input box when it's selected?

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

You just need to get the value of the selected index and place that into the input:var val = sel.options[sel.selectedIndex].value;document.getElementById('myInput').value = val;

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

It would be better to have PHP produce a JSON array than a comma-separated string. In Javascript it would be a regular array that you can loop through.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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);

Share this post


Link to post
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

Share this post


Link to post
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); 

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

would it still be connected to php? if so how?

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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 />

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...