Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I need to have a MySQL table result in JS array so that i can search through the names when typed in a text box. I mean, lets say i have a table with some names, now when the page is requested, it should populate a div with the list of the names from MYSQL, the div needs to have an input box in which when initials are typed, the list below should find the names matching the keywords kind of like search.

For this, i think i need to store the mysql result in a JS array so that on the onkeyup and onkeypress event of the text box, it should search for the matching results from the array items and populate the list with only those items.

I know, i'll have to make an ajax request on document.ready to fetch the results from database but then have no idea, how to store it in an array and then search through that on the text box events.

share|improve this question
    
In PHP (or whatever server side language you are using), get the query result and make an array out of it (structure it as you want), encode it as JSON and return it. Back on the client side, parse the response, i.e. convert the JSON into JS arrays/objects with JSON.parse and you are done. Have a look at the code in this question or google php javascript ajax json example. If you don't know how to query the database, you have to learn that as well of course. –  Felix Kling Aug 24 '13 at 7:03
add comment

1 Answer 1

you need something like this :

a input like this :

<input type="text" onkeyup="userscount('getusers.php')" name="name" /> 
<div id="shownames"></div>

and here is js for ajax request i use jquery for this:

function userscount(url)
{

        var val = $('[name="name"]').val()
        $.ajax({
                type:'post',
                data : {name: val },
                cache: false,
                url: url,
                dataType : 'json',
                success: function(resp){
                  $('#shownames').append(resp);
               }
               });


}

You can use ul li for appending

and here is php code(getusers.php):

<?php
if(isset($_POST['name']))
{
  $result = // execute your query 

   echo json_encode($result)
}

?>

with this you dont need a js array for search you directly search in your db

share|improve this answer
    
thats what i meant, wouldn't it be slower and inefficient if i query the database on every typed character? because the list of names won't really change while the user would be searching, so i thought it would be a better idea to store it in an array once and then search through that to populate the results –  coder101 Aug 24 '13 at 7:13
    
your records in your database never change? –  babak faghihian Aug 24 '13 at 7:18
    
@coder101: That all depends on how much data you have. If you just have 10 entries, go ahead and fetch them all. If you have thousands, make a request for every search term. Don't make the call on every keypress, make it when the user finished typing. You can then cache the results on the client side. –  Felix Kling Aug 24 '13 at 7:19
    
got it you can send a ajax request on document ready and you have your array in resp after that you can do what ever want –  babak faghihian Aug 24 '13 at 7:22
    
@babakfaghihian thats what i asked in the question as to how to put the ajax response(the list of names) in an array and then search through that array as the user types in the text box on top –  coder101 Aug 24 '13 at 7:53
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.