SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    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,167
    Mentioned
    453 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
    453
    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
    453
    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
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    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
    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?
    This implies you have written the code to create the <select> and its <options> based on the returned names.

    Can you post at least that code and then someone can show you how to add the onchange.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,804
    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="^$">

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    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?

  12. #12
    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.

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    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;
        
    ?>

  14. #14
    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.

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think i'm going in the right direction, but not there yet. How do I get the <span> text into field2 instead of field1 text into field2?

    by modifying this script?
    HTML Code:
    <html>
    <body>
    
    Field1: <input type="text" id="field1" value="Hello World!" />
    <br />
    Field2: <input type="text" id="field2" />
    <br /><br />
    Click the button to copy the content of Field1 to Field2.
    <br />
    
    <span onclick="document.getElementById('field2').value=document.getElementById('field1').value">Link text</span> 
    </body>
    </html>

  16. #16
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You appear to be getting there

    You can refer to the span's text using the "this" keyword to refer to the span object and its innerHTML which will be the text.

    try:

    Code:
    <span onclick="document.getElementById('field2').value=this.innerHTML">Link text</span>
    "Link text" should then be set to the value of the input box with id field2.

  17. #17
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I understand. Can we work on the div for the the links under the input field and then then a snippet to update the links that go into the link container?

    I've never updated a page without page refresh so what I know is this:
    Code:
    <html>
    <head>
    <style type"text/css">
    #combo_box {
    width:240px;
    margin:0px
    margin:0px 0px 0px 60px;
    }
    #link_container {
    
    margin:0px 0px 0px 100px;
    
    }
    </style>
    </head>
    <body>
    <div id="combo_box">
      Hint Generator:<input type="text" id="field2" /> </br>
        <div id="link_container">
          <span onclick="document.getElementById('field2').value=this.innerHTML">Jim</span></br>
          <span onclick="document.getElementById('field2').value=this.innerHTML">Jimmy</span></br>
          <span onclick="document.getElementById('field2').value=this.innerHTML">JiJi</span></br>
      </div>
    </div>
    </body>
    </html>


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
  •