niche Posted September 1, 2011 Share Posted September 1, 2011 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? Link to comment Share on other sites More sharing options...
ShadowMage Posted September 1, 2011 Share Posted September 1, 2011 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 More sharing options...
niche Posted September 1, 2011 Author Share Posted September 1, 2011 how do I position the <option> tags beneath the input box? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 2, 2011 Share Posted September 2, 2011 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 More sharing options...
niche Posted September 2, 2011 Author Share Posted September 2, 2011 That makes sense. Thanks.Then, how does the option get placed into the input box when it's selected? Link to comment Share on other sites More sharing options...
niche Posted September 2, 2011 Author Share Posted September 2, 2011 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 More sharing options...
ShadowMage Posted September 2, 2011 Share Posted September 2, 2011 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; Link to comment Share on other sites More sharing options...
niche Posted September 2, 2011 Author Share Posted September 2, 2011 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? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 2, 2011 Share Posted September 2, 2011 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. Link to comment Share on other sites More sharing options...
niche Posted September 2, 2011 Author Share Posted September 2, 2011 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. Link to comment Share on other sites More sharing options...
thescientist Posted September 2, 2011 Share Posted September 2, 2011 http://php.net/manual/en/book.json.phpdecode/encode. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 2, 2011 Share Posted September 2, 2011 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. Link to comment Share on other sites More sharing options...
niche Posted September 2, 2011 Author Share Posted September 2, 2011 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 More sharing options...
ShadowMage Posted September 2, 2011 Share Posted September 2, 2011 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. Link to comment Share on other sites More sharing options...
niche Posted September 2, 2011 Author Share Posted September 2, 2011 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 More sharing options...
niche Posted September 2, 2011 Author Share Posted September 2, 2011 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 More sharing options...
justsomeguy Posted September 2, 2011 Share Posted September 2, 2011 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 More sharing options...
niche Posted September 2, 2011 Author Share Posted September 2, 2011 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 More sharing options...
justsomeguy Posted September 2, 2011 Share Posted September 2, 2011 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); Link to comment Share on other sites More sharing options...
niche Posted September 3, 2011 Author Share Posted September 3, 2011 would it still be connected to php? if so how? Link to comment Share on other sites More sharing options...
niche Posted September 3, 2011 Author Share Posted September 3, 2011 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 5, 2011 Share Posted September 5, 2011 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 More sharing options...
lauralee Posted October 2, 2011 Share Posted October 2, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.