Autocomplete dropdown

Question

У меня есть панель поиска автозаполнения для поиска названий сотрудников.

Index.php

<script> 
     $(document).ready(function() { 

      $('input.employees').typeahead({ 
       name: 'employees', 
       remote: 'mysql.php?query=%QUERY' 

      }); 

     }) 
    </script> 
     <form><font color='black'> 
      <input type="text" name="employees" class="employees" placeholder="Search Employees..."> 

autocomplete.php

if (isset($_REQUEST['query'])) { 
    $query = $_REQUEST['query']; 
    $sql = mysql_query ("SELECT name_first, employee_id, unique_id, name_last FROM hr_employees WHERE name_first LIKE '%{$query}%' OR name_last LIKE '%{$query}%'"); 
    $array = array(); 
    while ($row = mysql_fetch_array($sql)) { 
     $array[] = array (
      'label' => $row['name_first'].', '.$row['name_last'], 
      'value' => $row['name_first'].' '.$row['name_last'].' ('.$row['employee_id'].')', 

     ); 
    } 
    //RETURN JSON ARRAY 
    echo json_encode ($array); 
} 

Это работает отлично. Однако я хотел бы иметь возможность щелкнуть результат в раскрывающемся списке и перейти на другую страницу. Это должно включать одну из переменных: employee_id. Например, http://example.com/new-page.php?id=employee_id

Возможно ли это?

Answer 1

Вы можете сделать это с помощью виджета jQuery-ui autocomplete. После добавления JavaScript и CSS файлы JQuery-UI, в писать код так:

$('.employees').autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json;charset=utf-8", 
       dataType: "json", 
       async: true, 
       url: "Autocomplete.php", 
       data: "{'query':'" + request.term + "'}", 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          value: item.value, 
          id: item.employee_id, 
          label:item.label 
         } 
        })) 
       } 
      }) 
     } 
    }).data('ui-autocomplete')._renderItem = function (ul, item) { 
     return $('<li></li>') 
      .data('item.autocomplete', item) 
      .append('<a href="yourPage.php?employee_id='+item.id+'">' + item.label + '</a>') 
      .appendTo(ul); 

}