SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    input suggestions with prompting

    I don't understand how to change this html from displaying a string to displaying relevant suggestions in a drop down format that when clicked will fill the input box. How do I do that?

    HTML Code:
    <body>
       <form>
        First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
      </form>
      <p>Suggestions: <span id="txtHint"></span></p>
    </body>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    HTML5 has something for this, but it's not widely supported yet. You'd need some more robust JavaScript for that. Perhaps do a search for something like "jquery form dropdown suggestions". (That gave some useful results.)

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where are your suggestions currently stored?

    If they are in a database, then you could use AJAX to send the user input to a server side script which retrieves the relevant records for the user input and then returns them to the browser. The AJAX request then uses the returned records to populate a <select> with the returned records to be used as suggestions. The user then selects an option from the <select> which is then automatically inserted in the input text box.

    All this is done without a page refresh.

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Probably should skip the html5 for right now. I'm learning a lot of new stuff as is.

    All the input possibilities are in a php array that's selected, for relevant options, with a for loop. Please confirm that that I need to get the input box and the <select> tag into a <div>. If so, I'm unclear about the code that will place a selected option in the input box. How would I do that? Also, please confirm that placing the input box and the selectable options can be part of an acceptable solution.

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are numerous ways this can be done.

    Can you post the code you have so far - html, php, javascript

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I want to change from suggestions abs an unselectable string to something selectable.[HTML]<html>
    <head>
    <script type="text/javascript">
    function showHint(str) {
    if (str.length==0) {
    document.getElementById("txtHint").innerHTML="";
    return;
    }
    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","gethint.php?q="+str,true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <p><b>Start typing a name in the input field below/b></p>
    <form>
    First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
    </body>
    </html>[HTML]

    PHP Code:
    <?php
    // Fill up array with names
    $a[]="Anna";
    $a[]="Brittany";
    $a[]="Cinderella";
    $a[]="Diana";
    $a[]="Eva";
    $a[]="Fiona";
    $a[]="Gunda";
    $a[]="Hege";
    $a[]="Inga";
    $a[]="Johanna";
    $a[]="Kitty";
    $a[]="Linda";
    $a[]="Nina";
    $a[]="Ophelia";
    $a[]="Petunia";
    $a[]="Amanda";
    $a[]="Raquel";
    $a[]="Cindy";
    $a[]="Doris";
    $a[]="Eve";
    $a[]="Evita";
    $a[]="Sunniva";
    $a[]="Tove";
    $a[]="Unni";
    $a[]="Violet";
    $a[]="Liza";
    $a[]="Elizabeth";
    $a[]="Ellen";
    $a[]="Wenche";
    $a[]="Vicky";
    //echo var_dump($a) . '<br/>';

    //get the q parameter from URL
    $q=$_GET["q"];

    //lookup all hints from array if length of q>0
    if (strlen($q) > 0)
      {
      
    $hint="";
      for(
    $i=0$i<count($a); $i++)
        {
        if (
    strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
          {
          if (
    $hint=="")
            {
            
    $hint=$a[$i];
            }
          else
            {
            
    $hint=$hint." , ".$a[$i];
            }
          }
        }
      }

    // Set output to "no suggestion" if no hint were found
    // or to the correct values
    if ($hint == "")
      {
      
    $response="no suggestion";
      }
    else
      {
      
    $response=$hint;
      }

    //output the response
    echo $response;

    ?>

  7. #7
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, so xmlhttp.responseText will contain a list of names separated by a comma based on the user input.

    You then need to change this line

    Code:
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    to create either links (<a> elements) or the option elements for a <select> using the names in xmlhttp.responseText

    If you decide to use <a>'s then you will need to add an onclick event handler to each <a> to transfer the clicked name to the input box. If you decide to use a <select>, it will need an onchange event handler to transfer the clicked name to the input box.

    This sounds like a homework exercise, so give it a go and if you get stuck post back with your updated code and someone will try to help.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    See Modern Combo Boxes for how to create a combo box using an input form and a list with JavaScript to tie them together.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but can't the scripts I've posted be modified. I understand them and need to use them to better understand how and why they need to be changed. That's ok isn't it?

    If so, I was told to change this line: document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    Couldn't I just leave that as is and do all the formatting in the php script? I'm obviously new to JS though I'm way less challenged by php.

    if so what would the <select> tag look like?

  10. #10
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nichemtktg View Post

    Couldn't I just leave that as is and do all the formatting in the php script?
    That depends on whether you want the hints displayed with or without a page refresh.

    If you want a page refresh then you can easily do it all in php and remove your ajax code. If you don't want a page refresh then you will need to use AJAX, as you are currently doing, and make the changes I suggested earlier.

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    let's talk about it both ways. first however, here's my current php file. It displays a wrapper div under the input field with anchors in it, but I don't know how the get the anchor values into the input field when one is selected. How do i do that?

    PHP Code:
        <?php
        
    // Fill up array with names
        
    $a[]="Bob";
        
    $a[]="Brittany";
        
    $a[]="Brian";
         
        
    //echo var_dump($a) . '<br/>';
         
        //get the q parameter from URL
        
    $q=$_GET["q"];
         
        
    //lookup all hints from array if length of q>0
        
    $hint '';
        
    $html '';
        
    $html "<div name='firstname' id='firstname'>";
        if (
    strlen($q) > 0) {
        foreach (
    $a as $key=>$value) {
        if (
    strpos(strtolower($value), $q) !== false) {
        
    //echo "$value\n";
        
    $html .= "<a style=\"text-decoration:none;\" href=".$value." value="$value " >".$value."</a></br>";
        
    //$hint .= $value . " <br />";
        
    }
        }
        }
        
    $html .= "</div>";
        
    $hint $html;
        
    // Set output to "no suggestion" if no hint were found
        // or to the correct values
         
        
    if ($hint == "") {
        
    $response="no suggestion";
        } else {
        
    $response=$hint;
        }
         
        
    //output the response
        
    echo $response;
        
    ?>

  12. #12
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    $html .= "<a style=\"text-decoration:none;\" href=".$value." value="$value " >".$value."</a></br>"
    The above html is invalid because the <a> element does not have an attribute called value.

    To get the text in the link copied to the input box, assign an onclick event handler to take the link's text and assign it to the value property of the input box. This is done with javascript.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •