Optymalizacja i pobieranie danych z bazy przy wyszukiwarce z "autocomplete"

0

Witam serdecznie.

Posiadam dość dużą bazę danych (120 MB, 400 000 rekordów) i chciałbym dodać do mojego serwisu wyszukiwarkę z opcją podpowiedzi (jQuery, "autocomplete").

Generalnie mam już skrypt, który działa, podpowiedzi się wyświetlają, problem w tym, że całość z bazy jest pobierana od razu przy ładowaniu strony. Wszystko mogło by zostać, ale nie potrafię poradzić sobie z pobieraniem danych z bazy dopiero gdy ktoś zaczyna wyszukiwać (czyli np. kliknie na pole wyszukiwarki, bądź dotrze do niej klikając "Tab" z klawiatury.

Kod wygląda następująco:

<?php
mysql_connect("localhost", "root", "pass");
mysql_select_db("dbname");

$query=mysql_query("select hotelName from table");
while($dane=mysql_fetch_array($query))
{
$tablica1.='"'.$dane['hotelName'].'", ';
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='../lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='../jquery.autocomplete.js'></script>
<script type='text/javascript' src='localdata.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />
    
<script type="text/javascript">
$().ready(function() {

    
    $("#tags").autocomplete([<?php echo $tablica1; ?>], {
        width: 320,
        max: 10,
        highlight: false,
        multiple: true,
        multipleSeparator: " ",
        scroll: true,
        scrollHeight: 300,
        formatItem: function(row, i, max) { 
            return row[0] + " (<i>" + row[1] + "</i>)";
            }, 
            formatMatch: function(row, i, max) { 
            return row[0]; 
            }, 
            formatResult: function(row) { 
            return row[0]; 
            }, 
    });

});

</script>
    
</head>

<body>
<div id="content">        
    <p>
            <input type="text" id='tags' />            
            <input type="button" value="Get Value" />
    </p>
</div>
</body>
</html>

Jeszcze lepiej było by ładować dane, gdy ktoś wpisze np. 2 litery i nie zasysać całości, tylko te rekordy, które spełniają wymagania.

Z góry dziękuję za pomoc.

Pozdrawiam,
badyllek1993

0

Już nawet nie wklejam linka do Let me google that for you, bo TO JEST W DOKUMENTACJI NAWET. Ba, nawet przykład idealnie taki sam -> zaczyna działać po dwóch znakach........

1 użytkowników online, w tym zalogowanych: 0, gości: 1