Download or Include
axios
https://github.com/axios/axios
Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
VueJS
https://vuejs.org/v2/guide/installation.html
CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Autocomplete textbox with PHP and MySQL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
</head>
<body>
<div id='myapp' style="padding:20px;">
<p><h1>Vue.js Autocomplete textbox with PHP and MySQL</h1></p>
<vueauto-complete v-model="country" @input="handleInput1()"></vueauto-complete>
<p><b>Selected Country id : {{ country }}</b> </p>
</div>
<script >
Vue.component('vueauto-complete', {
data: function () {
return {
searchText:'',
suggestiondata:[]
}
},
template: `<div class='vueautocomplete' >
<div>
<input type='text' @keyup='loadSuggestions' placeholder='Enter some text' v-model='searchText'> <br>
<div class='suggestionlist' v-if="suggestiondata.length" >
<ul>
<li v-for= '(item,index) in suggestiondata' @click='itemSelected(index)'>
{{ item.name }}
</li>
</ul>
</div>
</div>
</div>`,
methods: {
loadSuggestions: function(e){
var el = this;
this.suggestiondata = [];
if(this.searchText != ''){
axios.get('search.php', {
params: {
search: this.searchText
}
})
.then(function (response) {
el.suggestiondata = response.data;
});
}
},
itemSelected: function(index){
var id = this.suggestiondata[index].id;
var name = this.suggestiondata[index].name;
this.searchText = name;
this.suggestiondata = [];
this.$emit("input", id);
}
},
})
var app = new Vue({
el: '#myapp',
data: {
country: 0
},
methods: {
handleInput1: function(){
console.log("value : " + this.country);
}
}
})
</script>
</body>
</html>
search.php
//search.php
<?php
include "config.php";
if(isset($_GET['search'])){
$search = mysqli_real_escape_string($con,trim($_GET['search']));
$data = array();
if(!empty($search)){
$result = mysqli_query($con,"select * from country where country like '%".$search."%'");
while ($row = mysqli_fetch_array($result)) {
$data[] = array(
"id" => $row['id'],
"name"=>$row['country']
);
}
}
echo json_encode($data);
exit;
}
config.php
//config.php
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "testingdb";
// Create connection
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
style.css
//style.css
.vueautocomplete,.vueautocomplete .suggestionlist{
width: 300px;
}
.vueautocomplete input[type=text]{
width: 100%;
padding: 5px;
}
.suggestionlist{
position: absolute;
}
.suggestionlist ul{
width: 100%;
background: whitesmoke;
list-style: none;
margin: 0;
padding: 5px;
}
.suggestionlist ul li{
background: white;
padding: 4px;
margin-bottom: 1px;
}
.suggestionlist li:not(:last-child){
border-bottom: 1px solid #cecece;
}
.suggestionlist ul li:hover{
cursor: pointer;
background: whitesmoke;
}
