在PHP/Javascript中自動完成表單

Question

我一直在嘗試使整個一天的自動完成腳本，但我似乎無法弄清楚。

​​

這是我的html。 什麼，我試圖做的是使用AJAX來自動完成第一場 這樣的：

當有第一輸入9號它填補了其他輸入以及使用正確的鏈接數據

在ajax.php腳本發送mysqli_query到服務器，並詢問所有 數據（表：字段||行：序號，第一，仲丁基，第三）

Answer 1

https://github.com/ivaynberg/select2

PHP集成實施例：

<?php 
/* add your db connector in bootstrap.php */ 
require 'bootstrap.php'; 

/* 
$('#categories').select2({ 
    placeholder: 'Search for a category', 
    ajax: { 
     url: "/ajax/select2_sample.php", 
     dataType: 'json', 
     quietMillis: 100, 
     data: function (term, page) { 
      return { 
       term: term, //search term 
       page_limit: 10 // page size 
      }; 
     }, 
     results: function (data, page) { 
      return { results: data.results }; 
     } 

    }, 
    initSelection: function(element, callback) { 
     return $.getJSON("/ajax/select2_sample.php?id=" + (element.val()), null, function(data) { 

       return callback(data); 

     }); 
    } 

}); 
*/ 

$row = array(); 
$return_arr = array(); 
$row_array = array(); 

if((isset($_GET['term']) && strlen($_GET['term']) > 0) || (isset($_GET['id']) &&  is_numeric($_GET['id']))) 
{ 

if(isset($_GET['term'])) 
{ 
    $getVar = $db->real_escape_string($_GET['term']); 
    $whereClause = " label LIKE '%" . $getVar ."%' "; 
} 
elseif(isset($_GET['id'])) 
{ 
    $whereClause = " categoryId = $getVar "; 
} 
/* limit with page_limit get */ 

$limit = intval($_GET['page_limit']); 

$sql = "SELECT id, text FROM mytable WHERE $whereClause ORDER BY text LIMIT $limit"; 

/** @var $result MySQLi_result */ 
$result = $db->query($sql); 

    if($result->num_rows > 0) 
    { 

     while($row = $result->fetch_array()) 
     { 
      $row_array['id'] = $row['id']; 
      $row_array['text'] = utf8_encode($row['text']); 
      array_push($return_arr,$row_array); 
     } 

    } 
} 
else 
{ 
    $row_array['id'] = 0; 
    $row_array['text'] = utf8_encode('Start Typing....'); 
    array_push($return_arr,$row_array); 
} 

$ret = array(); 
/* this is the return for a single result needed by select2 for initSelection */ 
if(isset($_GET['id'])) 
{ 
    $ret = $row_array; 
} 
/* this is the return for a multiple results needed by select2 
* Your results in select2 options needs to be data.result 
*/ 
else 
{ 
    $ret['results'] = $return_arr; 
} 
echo json_encode($ret); 

$db->close(); 

舊版本： 在我的例子我使用的是舊Yii的項目，但你可以輕鬆地編輯您的要求。

請求以JSON編碼。 （你並不需要爲這個壽警予）

public function actionSearchUser($query) { 
    $this->check(); 
    if ($query === '' || strlen($query) < 3) { 
     echo CJSON::encode(array('id' => -1)); 
    } else { 
     $users = User::model()->findAll(array('order' => 'userID', 
      'condition' => 'username LIKE :username', 
      'limit' => '5', 
      'params' => array(':username' => $query . '%') 
     )); 
     $data = array(); 
     foreach ($users as $user) { 
      $data[] = array(
       'id' => $user->userID, 
       'text' => $user->username, 
      ); 
     } 
     echo CJSON::encode($data); 
    } 

    Yii::app()->end(); 
} 

在視圖使用本：

$this->widget('ext.ESelect2.ESelect2', array(
'name' => 'userID', 
'options' => array(
    'minimumInputLength' => '3', 
    'width' => '348px', 
    'placeholder' => 'Select Person', 
    'ajax' => array(
     'url' => Yii::app()->controller->createUrl('API/searchUser'), 
     'dataType' => 'json', 
     'data' => 'js:function(term, page) { return {q: term }; }', 
     'results' => 'js:function(data) { return {results: data}; }', 
    ), 
), 

））;

下面的腳本是從官方資料爲準，可能更容易採取到：

$("#e6").select2({ 
     placeholder: {title: "Search for a movie", id: ""}, 
     minimumInputLength: 1, 
     ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
      url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
      dataType: 'jsonp', 
      data: function (term, page) { 
       return { 
        q: term, // search term 
        page_limit: 10, 
        apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working 
       }; 
      }, 
      results: function (data, page) { // parse the results into the format expected by Select2. 
       // since we are using custom formatting functions we do not need to alter remote JSON data 
       return {results: data.movies}; 
      } 
     }, 
     formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
     formatSelection: movieFormatSelection // omitted for brevity, see the source of this page 
    }); 

這可以在這裏找到：http://ivaynberg.github.io/select2/select-2.1.html

您可以在GitHub的倉庫optain的選擇2副本以上。