2015-04-04 19 views
11

Come noterete, sono uno scienziato dei dati e non un programmatore/sviluppatore.Caricamento dati remoto da SQL con Selectize.js

In SQL, ho un database con decine di migliaia di nomi. Sono riuscito a implementare lo strumento selectize.js nel mio sito web di bootstrap su Twitter, ma ci sono molti modi per rallentare. Nella pagina della guida di Selectize.js, https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md, ho letto che è possibile caricare le opzioni al volo quando l'utente inserisce qualcosa.

Ma dagli esempi non riesco a scoprire come eseguire questa operazione da una tabella SQL. Qualcuno può scrivere in pseudo-codice cosa dovrei fare?

In breve, quando l'utente digita alcuni nomi, voglio che lo script trovi nella tabella SQL questi nomi e faccia selezionare i tag html, piuttosto che scaricare tutti i nomi già all'inizio.

Questo è il codice che ho in questo momento:

  <div class="control-group"> 
       <select id="select-yourself" class="demo-default" placeholder="Type your name..."> 
        <option value="">Type your name ...</option> 
         <?php 
          for($row = 0; $row < sizeof($race_table); $row++){ 
          echo("<option value=".$row.">". 
          $race_table[$row]['Name']."</option>"); 
         } 
         ?> 
       </select> 
      </div> 
      <script> 
      $('#select-yourself').selectize({ 
       create: false, 
       maxOptions: 100, 
       //sortField: { 
        //field: 'text', 
        //direction: 'asc' 
       //}, 
       dropdownParent: 'body' 
      }); 

risposta

18

Si potrebbe provare qualcosa di simile:

HTML:

<div class="control-group"> 
    <select id="select-yourself" class="demo-default" placeholder="Type your name..."> 
    <option value="">Type your name ...</option> 
    </select> 
</div> 

JavaScript:

$('#select-yourself').selectize({ 
    valueField: 'name', 
    labelField: 'name', 
    searchField: 'name', 
    options: [], 
    create: false, 
    load: function(query, callback) { 
     if (!query.length) return callback(); 
     $.ajax({ 
      url: 'http://127.0.0.1:8080/getnames.php', 
      type: 'GET', 
      dataType: 'json', 
      data: { 
       name: query, 
      }, 
      error: function() { 
       callback(); 
      }, 
      success: function(res) { 
       callback(res); 
      } 
     }); 
    }); 

PHP il file (getnames.php) è usato su per creare file json dai dati del database mysql:

<?php 
// parameters from URL 
$urlparam_name = $_GET['name'] ."%"; 

// connect to the database 
include("mysql.inc"); 
$link = mysqli_connect($host, $user, $pass, $db) or die("Error " .mysqli_error($link)); 

$sql = " 
SELECT `race_table`.`name` 
FROM `race_table` 
WHERE `race_table`.`name` like '$urlparam_name' 
GROUP BY `race_table`.`name` ASC 
"; 

$result = mysqli_query($link, $sql) or die("Error " .mysqli_error($link)); 
$rows = array(); 
while ($row = mysqli_fetch_assoc($result)) 
{ 
    extract($row); 
    $rows[] = "{ \"name\": \"$name\" }"; 
} 

// output to the browser 
header('Content-Type: text/javascript; charset=UTF-8'); 
echo "[\n" .join(",\n", $rows) ."\n]"; 
?> 
+0

È questa pratica comune o sto supervisionando qualcosa? –

+0

Questa è una pratica comune. Puoi trovare demo dell'autore selectize.js su questa pagina [1]. Notare gli esempi "Fonte remota - Github" e "Fonte remota - Pomodori marci". [1]: http://brianreavis.github.io/selectize.js/ – alemv

+0

Sì, ma questi esempi utilizzano un'API di un altro sito Web, non un database SQL ... –

Problemi correlati