Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Add commas to inputbox with javascript

    I'm basically trying to do an autcomplete with live search. Where I would enter a username without a click and it would bring me back the user's name, and I. I would 3 three input boxes. One input where I can add the username and erase it. The other two to collect the users name and Id. I was able to get a users Id and username in a Div box called send to search and than send it to the input fields but when I try to add more names and Id's it erases the previous name that was in the input fields. I would like to add some javascript to the page so that everytime I do a live search I get can be able to add it to the names and Id's already in the input fields by seperating it with commas.

    PHP Code:
    include('connect.php');
    $s $_REQUEST["s"];
    $output "";
    $s str_replace(" ""%"$s);
    $query " SELECT pm.timestamp, pm.message, pm.name, header.id, header.username
    FROM pm, header
    WHERE header.username LIKE '%" 
    $s "%' ";

    $squery mysql_query($query);

    if((
    mysql_num_rows($squery) != 0) && ($s != "")){
    while(
    $sLookup mysql_fetch_array($squery)){
    $username $sLookup["username"];  $id $sLookup["id"];   $name $sLookup["name"];
    $output .= '<div onclick="sendToSearcht(\'' $username '\')">' $username'     <div onclick="sendToSearchr(\'' $id '\')"> . $id. ' ' . $message. '     "   '; 

    }
    }     

    echo $output; 

  • #2
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    <html>
    <
    head>


    <
    title>My AJAX Search</title>
    </
    head>
    <
    body>
    <
    form id="quick-search" action="onlytoaddtodatabase.php" method="post" >
    <
    p>
    <
    label for="qsearch">Search:</label>
    <
    input id="qsearch" type="text" name="qsearch" onkeyup="liveSearch()" />
    <
    input id="qsearcht" type="text" name="qsearcht" onkeyup="liveSearch()" />
    <
    input id="qsearchr" type="text" name="qsearchr"   onkeyup="liveSearch()" />
    <
    input type="submit" />
    </
    p>
    <
    ul id="searchResults">
    <
    ul id="searchwow">
    </
    ul>
    <
    ul id="ul1"></ul>&#8203;
    </form>
    </
    body>
    </
    html>
    <
    script>
    $(
    '#qsearchr').on('keyup', function() {
         var 
    terms splitthis.value );
              
    // remove the current input
              
    terms.pop();
              
    // add the selected item
              
    terms.pushui.item.value );
              
    // add placeholder to get the comma-and-space at the end
              
    terms.push"" );
              
    this.value terms.join", " );
              return 
    false;
      
    });&
    #8203;

    </script>

    <script>

    function createRequestObject(){
    var request_o;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
    request_o = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
    request_o = new XMLHttpRequest();
    }
    return request_o;
    }

    var http = createRequestObject(); 

    function liveSearch()
    {
    var url = "usersearcher.php";
    var s = document.getElementById('qsearch').value;
    var params = "&s="+s;
    http.open("POST", url, true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status != 200) {
    document.getElementById('searchResults').innerHTML='<li>Loading...</li>';
    }
    if(http.readyState == 4 && http.status == 200) {
    document.getElementById('searchResults').innerHTML = http.responseText; 

    }
    http.send(params);
    }

    function sendToSearcht(str){
    document.getElementById('qsearch').value = str;
    document.getElementById('searchResults').innerHTML = ",";
    }
    function sendToSearchr(str){
    document.getElementById('qsearchr').value = str;
    document.getElementById('searchResults').innerHTML = "";


  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    as you can see in the smaller javascript I tried to do my own but it does not work. I found parts of the code somewhere else.

    This was the original code at the top but however when I deleted it hoping it wouldn't erase the usernames and Id's already inside the 2 inputs they still were deleted.

    [PHP][<script>
    $('#qsearch').on('keyup', function() {
    var textIn = $(this).val();
    var idArr = textIn.split(',');
    $('li', '#ul1').remove();
    $.each(idArr, function(i) {
    $('#ul1').append('<li>' + idArr[i] + '</li>');
    });
    });​

    </script>/PHP]

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    <script>
    $(
    '#qsearch').on('keyup', function() {
    var 
    textIn = $(this).val();
    var 
    idArr textIn.split(',');
    $(
    'li''#ul1').remove();
    $.
    each(idArr, function(i) {
    $(
    '#ul1').append('<li>' idArr[i] + '</li>');
    });
    });&
    #8203;

    </script> 

  • #5
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    <script

    function 
    createRequestObject(){ 
    var 
    request_o
    var 
    browser navigator.appName
    if(
    browser == "Microsoft Internet Explorer"){ 
    request_o = new ActiveXObject("Microsoft.XMLHTTP"); 
    }else{ 
    request_o = new XMLHttpRequest(); 

    return 
    request_o


    var 
    http createRequestObject();  

    function 
    liveSearch() 

    var 
    url "usersearcher.php"
    var 
    document.getElementById('qsearch').value
    var 
    params "&s="+s
    http.open("POST"urltrue); 

    http.setRequestHeader("Content-type""application/x-www-form-urlencoded"); 
    http.setRequestHeader("Content-length"params.length); 
    http.setRequestHeader("Connection""close"); 

    http.onreadystatechange = function() { 
    if(
    http.readyState == && http.status != 200) { 
    document.getElementById('searchResults').innerHTML='<li>Loading...</li>'

    if(
    http.readyState == && http.status == 200) { 
    document.getElementById('searchResults').innerHTML http.responseText;  
    }  

    http.send(params); 


    function 
    sendToSearcht(str){ 
    document.getElementById('qsearch').value str
    document.getElementById('searchResults').innerHTML ","

    function 
    sendToSearchr(str){ 
    document.getElementById('qsearchr').value str
    document.getElementById('searchResults').innerHTML ""
    </script> 

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    @ codesareall,
    In the php file your calling you have this line: $s = $_REQUEST["s"]; .
    If you only learn one thing here it's this:
    Do not use $_REQUEST[]!! Use $_GET[] or $_POST[].
    Because $_REQUEST[] contain both of these and $_COOKIE. They will over write each other if they have the same field names. And it's hard to know which one you mean without looking at another file (A total waste of time)
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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