在编写JavaScript时，我使用原生的JavaScript
先给定所有的国家数据
var arr = ["中国","日本","美国","俄罗斯","加拿大","英国","澳大利亚","西班牙","德国","孟买加","阿拉伯","印度","印度尼西亚"];
然后在获取input输入框的输入内容
var search = document.getElementsByClassName("blue-input")[0];
text内容 = search.value
我需要实时对输入框中内容进行查询，一旦我输入内容不同，提示框中的内容也立刻改变
所以我使用DOM中的oninput事件
oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
提示： 该事件类似于onchange事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
然后再焦点在input搜索框中时有下拉列表ul，否则没有，所以我使用onfocus和onblur
onblur 事件会在对象失去焦点时发生。
Onblur 经常用于Javascript验证代码，一般用于表单输入框。
onfocus 事件在对象获得焦点时发生。
Onfocus 通常用于 <input>, <select>, 和<a>.
对数据进行匹配时使用模糊查询
function searchByIndexOf(keyWord, list){
if(!(list instanceof Array)){
return ;
if(keyWord == ""){
return [];
}else{
var len = list.length;
var arr = [];
for(var i=0;i<len;i++){
if(list[i].indexOf(keyWord)>=0){
arr.push(list[i]);
return arr;
HTML代码
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/common.css" />
</head>
<div id="container" class="center-justify">
<div class="sea-container">
<form action="">
<input type="text" name="search" class="blue-input" >
<input type="submit" value="搜索" class="blue-button">
</form>
<p id="selectedId"></p>
</div>
</div>
<script src="js/sreach.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS代码
margin: 0px;
padding: 0px;
border: 0px;
text-decoration: none;
.center-all {
display: flex;
justify-content: center;
align-items: center;
.center-align {
display: flex;
align-items: center;
.center-justify {
display: flex;
justify-content: center;
.center-spacearound {
display: flex;
align-items: center;
justify-content: space-around;
#container {
width: 800px;
height: 400px;
margin: 0 auto;
padding-top: 30px;
box-sizing: border-box;
.sea-container {
width: 450px;
height: 30px;
background-color: green;
margin: 100px auto;
border: 1px solid #317EF3;
.blue-input {
float: left;
width: 350px;
height: 30px;
padding: 0 10px;
box-sizing: border-box;
.blue-button {
width: 100px;
height: 30px;
background-color: #317EF3;
color: white;
font-size: 15px;
ul#drop {
list-style: none;
margin: 0;
padding: 0;
ul#drop li {
margin: 0;
padding: 10px;
ul#drop li:hover {
background-color: darkgrey;
width:200px;
p#selectedId {
display: inline-block;
JavaScript代码
var arr = ["中国","日本","美国","俄罗斯","加拿大","英国","澳大利亚","西班牙","德国","孟买加","阿拉伯","印度","印度尼西亚"];
var search = document.getElementsByClassName("blue-input")[0];
var selectedId = document.getElementById("selectedId")
function showList(){
var res = searchByIndexOf(search.value,arr);
for(var i=0;i<res.length;i++){
var li = document.createElement("li");
li.innerHTML = res[i];
document.getElementById("drop").appendChild(li);
search.oninput = function getMoreContents() {
var drop = document.getElementById("drop");
selectedId.removeChild(drop);
var originalUl = document.createElement("ul");
originalUl.id = "drop";
selectedId.appendChild(originalUl);
showList();
search.onfocus = function(){
var originalUl = document.createElement("ul");
originalUl.id = "drop";
selectedId.appendChild(originalUl);
showList();
search.onblur = function(){
var drop = document.getElementById("drop");
selectedId.removeChild(drop);
function searchByIndexOf(keyWord, list){
if(!(list instanceof Array)){
return ;
if(keyWord == ""){
return [];
}else{
var len = list.length;
var arr = [];
for(var i=0;i<len;i++){
if(list[i].indexOf(keyWord)>=0){
arr.push(list[i]);
return arr;
