オートコンプリートフィールドにMySQLを使用

Question

私はウェブ開発には新しく、私はファミリービジネス向けのウェブサイトを作成しています。私たちは調剤薬局であり、クライアントの医師が新しい処方箋をオンラインで提出するだけでなく、私たちの処方に価格見積もりを得るための機能を実装したいと考えています。私はorderformのページをすでに作成していますが、私は "Drug"フィールドを私たちのデータベースの式を使ってオートコンプリートにしたいと思っています。

私はMySQL（Fedoraサーバー上のMariaDB）データベースが既に設定されており、照会の準備ができています。フィールドオートコンプリートの作り方についてはわかりません。私はTwitterのTypeahead javascriptシステムの実装を見てきましたが、私はJSに関する経験がないのでチュートリアルに従うことができませんでした。

Answer 1

ブートストラップを使用している場合（そうでない場合はそうする必要があります） 先読みを使用できます。 （google typeahead.bundle.js）
ブートストラップ後にこのjavascriptファイルを呼び出します。

次に、あなたは、あなたが入力すると

<input id="mytextquery" name="mytextquery" type="text" size="71" maxlength="128" value="" placeholder="Carrier (type to search)" class="form-control typeahead"/> 

ページにはほとんどのjavascriptが必要

<style> 
.typeahead, 
.tt-query, 
.tt-hint { 

    font-size: 12px; 

} 

.typeahead { 
    background-color: #fff; 
} 

.typeahead:focus { 
    border: 2px solid #0097cf; 
} 
.tt-query { 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 

.tt-hint { 
    color: #999 
} 

.tt-menu { 
    width: 422px; 
    margin: 12px 0; 
    padding: 8px 0; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
      border-radius: 8px; 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
      box-shadow: 0 5px 10px rgba(0,0,0,.2); 
} 

.tt-suggestion { 
    padding: 3px 20px; 
    font-size: 18px; 
    line-height: 24px; 
} 

.tt-suggestion:hover { 
    cursor: pointer; 
    color: #fff; 
    background-color: #0097cf; 
} 

.tt-suggestion.tt-cursor { 
    color: #fff; 
    background-color: #0097cf; 

} 

.tt-suggestion p { 
    margin: 0; 
} 

.gist { 
    font-size: 14px; 
} 

少しCSSを必要としています。

<script> 
    $(function() { 
    $('#mytextquery').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     limit: 12, 
     async: true, 
     source: function (query, processSync, processAsync) { 

     return $.ajax({ 
      url: "typeTest.php", 
      type: 'GET', 
      data: {query: query}, 
      dataType: 'json', 
      success: function (json) { 
      // in this example, json is simply an array of strings 
      return processAsync(json); 
      } 
     }); 
     } 
    }); 

    }); 
</script> 

は、その後、あなたのデータベースからデータを取得するために使用しているものは何でもいくつかのPHPやは

$query = $_GET['query']; 
//Do your SQL query here 
$query = "SELECT * from table where field LIKE '$query'"; 
//Get results and format like below 
$data1 = [ 'Item 1', 'Item 2', 'Item 3' ,'etc', 'etc']; 

//Export it so typeahead can read it. 
header('Content-type: application/json'); 

    echo json_encode($data1);