How to search for users in the database without select option

Question

Good staff always found bad a method I use to search users in the database in a select option, when I have many records the page takes to load and only tends to get worse, someone has some idea of how I can restructure my search for user by bringing names similar users and not exactly typing the full name?

php client code.

<?php
    if (isset($_GET['apagar']) && $_GET['apagar'] == 'excluir') {
        $deleta = mysql_query("DELETE FROM t_cadclientes WHERE Ficha = '$_GET[id]'");
    if($deleta == '1'){
        echo "Cliente deletado com sucesso !";
    echo "<meta HTTP-EQUIV='refresh' CONTENT='2;URL=clientes.php'>";
    }else{
        echo "Erro ao deletar, favor tente novamente !";
}
}
?>
<div id="painelclientes">
<?php
$sql = "SELECT Ficha, Snome FROM t_cadclientes ORDER BY Ficha ASC, Snome ASC";
$resultado = mysql_query($sql)
            or die (mysql_error());
if(@mysql_num_rows($resultado) == 0)
            echo ("Cliente não encontrado(a) !");
?>

<form id="form2" name="form2" method"post" action="" enctype="multipart/form-data">
<div align="center">
  <table border="0" align="center">
      <tr>
        <td><label>
          <select name="id" id="id">
            <option value="-1" selected="selected">Selecione um cliente</option>
            <?php 
    while($linha=mysql_fetch_array($resultado)) {
        $id = $linha[0];
        $Snome = $linha[1];
?>
            <option value="<?php echo $id;?>"><?php echo $Snome;  ?></option>
<?php
    }
?>
          </select>
          </label></td>
          <tr>
        <label>
          <input type="hidden" name="apagar" value="excluir" />
          <input type=image src="../images/excluirOver.png" onMouseOver="this.src='../images/excluir.png'" onMouseOut="this.src='../images/excluirOver.png'" title="Excluir" style="border:0;" name="excluir" id="excluir" value="Excluir" />
          <input type=image src="../images/editarOver.png" onMouseOver="this.src='../images/editar.png'" onMouseOut="this.src='../images/editarOver.png'" title="Editar" style="border:0;" name="Alterar" id="Alterar" value="Alterar" formaction="editar_clientes.php" />
          <input type=image src="../images/vendas_crediarioOver.png" onMouseOver="this.src='../images/vendas_crediario.png'" onMouseOut="this.src='../images/vendas_crediarioOver.png'" title="Venda Crediário" style="border:0;" name="vendas_crediario" id="vendas_crediario" value="vendas_crediario" formaction="vendas_crediario.php" />
          <input type=image src="../images/imprimirOver.png" onMouseOver="this.src='../images/imprimir.png'" onMouseOut="this.src='../images/imprimirOver.png'" title="Imprimir" style="border:0;" name="Imprimir" id="Imprimir" value="Imprimir"  formaction="imprimir_clientes.php" />
          <input type=image src="../images/cadastrarOver.png" onMouseOver="this.src='../images/cadastrar.png'" onMouseOut="this.src='../images/cadastrarOver.png'" title="Cadastrar" style="border:0;" name="cadastrar" id="cadastrar" value="cadastrar"  formaction="cadastro_clientes.php" />
          </label>
      </tr>
</table>
</form>
</div>

Answer 1

You can use this jquery plugin([http://loopj.com/jquery-tokeninput][1]) as follows:

Include jQuery and the plugin in head:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="yourfiles/jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css" href="yourfiles/token-input.css" />

and start like this:

<input type="text" name="blah" id="user-input">
<script type="text/javascript">
$(document).ready(function () {
    $("#user-input").tokenInput("/clientes-ajax.php");
});
</script>

the client-ajax.php file would be something like this to return :

$q = mysql_real_escape_string($_GET['q']);
$resultado = mysql_query("SELECT * FROM users WHERE name LIKE '{$q}%'", $db);  

//Create an array
$json_response = array();
$row_array = array();

while($linha = mysql_fetch_array($resultado)) {
   $row_array['id']= [$linha[0];
   $row_array['name']= [$linha[1];

   //push the values in the array
   array_push($json_response,$row_array);
}
echo json_encode($json_response);