我找到了有关contenteditable可自动完成的代码，它终于可以工作了。我的问题是，如果要从数据库中进行搜索（例如，在具有马来西亚，帕劳和卡塔尔的国家/地区的数据库中）进行搜索，那么当我键入ma时，它将显示马来西亚作为选项。
我的代码如下，现在我可以搜索在页面中定义的国家（使用var），如果要使用search.php从数据库中搜索代码，该如何修改代码？
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contenteditable Autocomplete – A bootstrap plugin</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-expandable-input/bootstrap-expandable-input.css">
<link rel="stylesheet" type="text/css" href="bootstrap-contenteditable-autocomplete.css">
</head>
<body>
<header></header>
<span contenteditable name="example-single" placeholder="Set country name" data-autocomplete-spy></span>
<p contenteditable name="example-multi" placeholder="Ad country name(s)" data-autocomplete-spy data-autocomplete data-autocomplete-multiple></p>
<style>
body {
font-family: Helvetica, Arial;
}
.main {
padding: 18px;
}
p.info {
font-size: 10px;
padding: 4px 0 0;
color: #888;
margin: 80px 0 0;
border-top: 1px solid #ccc;
}
p.info a {
color: inherit;
text-decoration: underline;
}
[contenteditable] {
outline: none;
text-align: left;
background: #eee;
padding: 8px;
border-left: 2px solid #ccc;
}
span[contenteditable] {
display: inline-block;
}
</style>
<script src="bower_components/jquery/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootstrap-expandable-input/bootstrap-expandable-input.js"></script>
<script src="bootstrap-contenteditable-autocomplete.js"></script>
<script>
var countries = ['Afghanistan', 'Akrotiri', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Ashmore and Cartier Islands', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas, The', 'Bahrain', 'Bangladesh', 'Barbados', 'Bassas da India', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Bouvet Island', 'Brazil', 'British Indian Ocean Territory', 'British Virgin Islands', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad', 'Chile', 'China', 'Christmas Island', 'Clipperton Island', 'Cocos (Keeling) Islands', 'Colombia', 'Comoros', 'Congo, Democratic Republic of the', 'Congo, Republic of the', 'Cook Islands', 'Coral Sea Islands', 'Costa Rica', 'Cote d\'Ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Dhekelia', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Europa Island', 'Falkland Islands (Islas Malvinas)', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Guiana', 'French Polynesia', 'French Southern and Antarctic Lands', 'Gabon', 'Gambia, The', 'Gaza Strip', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Glorioso Islands', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Heard Island and McDonald Islands', 'Holy See (Vatican City)', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Jan Mayen', 'Japan', 'Jersey', 'Jordan', 'Juan de Nova Island', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia, Federated States of', 'Moldova', 'Monaco', 'Mongolia', 'Montserrat', 'Morocco', 'Mozambique', 'Namibia', 'Nauru', 'Navassa Island', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Panama', 'Papua New Guinea', 'Paracel Islands', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn Islands', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russia', 'Rwanda', 'Saint Helena', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Pierre and Miquelon', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Georgia and the South Sandwich Islands', 'Spain', 'Spratly Islands', 'Sri Lanka', 'Sudan', 'Suriname', 'Svalbard', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Timor-Leste', 'Togo', 'Tokelau', 'Tonga', 'Trinidad and Tobago', 'Tromelin Island', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks and Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Virgin Islands', 'Wake Island', 'Wallis and Futuna', 'West Bank', 'Western Sahara', 'Yemen', 'Zambia', 'Zimbabwe'];
$(document.body).on('autocomplete:request', function(event, query, callback)
{
console.log('autocomplete:request')
query = query.toLowerCase();
callback(countries.filter(function(country) {
return country.toLowerCase().indexOf(query) !== -1;
}));
});
$(document.body).on('autocomplete:select', function(event, selected) {
console.log('autocomplete:select', selected)
});
</script>
</body>
</html>
我想将search.php用于自动完成
search.php
<?php
$key=$_GET['key'];
$array = array();
$con=mysqli_connect("localhost","root","","php_country");
$query=mysqli_query($con, "select * from country where city LIKE '%{$key}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['city'];
}
echo json_encode($array);
mysqli_close($con);
?>