Building Dropdown Selection from SQL Statement using jQuery

Question

I have a website where you can get information about some content in the database using some parameters you can set before.
By now the page loads the SQL Statement (to populate the dropdown menu for selection) from a file, executes it and adds HTML code as shown below:

while($rec = $connection->FetchRow($result))
{                           
    $selected = (in_array($rec[0], $arr) OR $bSelFirst == TRUE) ? 'selected="selected"' : '';
    $sResult = htmlentities($rec[0], ENT_QUOTES, "iso8859-1" );
    $sMatchcode = htmlentities($rec[1], ENT_QUOTES, "iso8859-1" );

    $tmprslt .= '  <option value="'.$sResult.'" '.$selected.'>  '.$sResult.';'.$sMatchcode.'</option>';                 
    $bSelFirst = false;
}

The problem with this code is, on large results the page takes ages to build and the dropdown menu is almost unusable because it's so slow, sometimes the tab even crashes.
My question now is, how would I load in these information dynamically? Like, you type something into the input field and it only loads or displays relevant answers (e.g. I type "Ap" then it shows me all results that contain "Ap" (case sensitive)).

Yes, that sounds suitable, but I think I will need another component to have it loading dynamically and not display everything at once, don't I? — Kia
– Kia, Commented Sep 1, 2015 at 7:44
here's an example of what you want.. jqueryui.com/autocomplete when the page loads you need to run a jquery.ajax that retrieves data from the database... put it on an array and substitute the availableTags you see on the example... =) — Sam Teng Wong
– Sam Teng Wong, Commented Sep 1, 2015 at 7:47

Alex M · Accepted Answer · 2015-09-01 07:45:28Z

3

You could use something like Select2 or jQueryUI Autocomplete

The page loads, user sees a select/text box, types something in, you filter results in the back end and return them as JSON.

Alternatively, you could write the JS yourself (even so, I strongly suggest you use a library such as jQuery).

answered Sep 1, 2015 at 7:45

Alex M

5145 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Acharya Anurag · Accepted Answer · 2015-09-01 07:57:33Z

If Autocomplete works for you, how about you use a PHP code in the server to fetch and send the data in JSON format? Then you can easily use the response from the page to display in the dropdown using jQuery, as thus:

PHP Code

<?php

$q=$_REQUEST["q"]; 
$sql="something";
$result = mysql_query($sql);

$json=array();

while($row = mysql_fetch_array($result))
{
  array_push($json, $row['varName']);
}

echo json_encode($json);
?>

jQuery

$(function() {
        $( "#awesome" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "getdata.php",
                    dataType: "jsonp",
                    data: {
                        q: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
        });
    });

Collectives™ on Stack Overflow

Building Dropdown Selection from SQL Statement using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related