要实现的效果就是这样的：

原理说白了就是发送一个get请求：

然后把数据放到list里面就可以了。

这里使用jsonp，因为这个要在客户端发起的请求。

关键代码如下：

function getSuggestion(url, word){

		let wordObject = {'wd' : word, 'cb' : 'suggestionCallBack'};
		$.ajax({

			async: false,
			url: url,
			type: 'GET',
			dataType: 'jsonp',
			jsonp: 'cb',
			// jsonpCallback: 'suggestionCallBack',
			data: wordObject,
			timeout: 5000,
			success: function (data) {

			},
			error: function (data) {

				// alert(data);
			}
		})
	}

	//获取控件ID
	function getId(id) {
		return (typeof id == 'string') ? document.getElementById(id) : id
	};

	function suggestionCallBack(data){

		let urls = data["s"];
		let html = "<ul id=\"allSitesBoxContent\" class=\"list-group text-start\" style=\"position: absolute\">";
		if (urls) {

			let urlList = urls;
			for (let i = urlList.length - 1; i >= 0; i--) {

				let textVal = urlList[i];
				if ($.trim(textVal) != "" && $.trim(textVal) != "undefined") {

					html += "<li class='list-group-item bg-transparent text-white border-1 border-white' >" + textVal + "</li>";
				}
			}
		}

		html += "</ul>";

		getId("ulFather").innerHTML = html;
		controllerSelect();
	}


	$('#searchInput').bind('input propertychange', function () {

		let word = $.trim($("#searchInput").val());
		if(word == ""){

			getId("ulFather").innerHTML = "";
			return;
		}
		getSuggestion('http://suggestion.baidu.com/su', word);
	})

这样就设置好了list，下面是按下键盘，选中，然后回车跳转：

function jumpSearch(){

		let searchInput = document.getElementById('searchInput');
		window.location.href = searchArr[picIndex] + searchInput.value;
	}

以及：

;


function controllerSelect() {

    let list = document.getElementById('allSitesBoxContent').getElementsByTagName('li');
    let index = -1;
    let liLength = list.length - 1;

    function addIndex() {

        index = index >= liLength ? 0 : ++index;
    }

    function reduceIndex() {

        index = index <= 0 ?liLength : --index;
        return index;
    }

    function setLiColorByClass(){

        for(let i =0; i < list.length; i++){

            if(i == index){

                list[i].className = 'list-group-item border-1 list-group-item-info';
            }
            else{

                list[i].className = 'list-group-item bg-transparent text-white border-1 border-white';
            }
        }
    }

    let searchInput = document.getElementById('searchInput');

    searchInput.onkeydown = function(e){

        if(e.key == "Enter"){

            return false;
        }
    }

    document.onkeydown = function (e) {

        if(e.key == 'ArrowUp'){

            reduceIndex();
            setLiColorByClass();
        }
        else if(e.key == 'ArrowDown'){

            addIndex();
            setLiColorByClass();
        }
        else if(e.key == "Enter"){

            console.log(index);
            if(index > 0){

                searchInput.value = list[index].innerHTML;
                let father = document.getElementById('allSitesBoxContent');

                if(father != null){

                    father.remove();
                }
            }
            else {

                if(searchInput.value != ""){

                    console.log(searchArr[picIndex] + searchInput.value);
                    window.location.href = searchArr[picIndex] + searchInput.value;
                    return false;
                }
            }

            searchInput.onkeydown = function(e){

                if(e.key == "Enter"){

                    console.log(searchArr[picIndex]);

                    if(searchInput.value != ""){

                        console.log(searchArr[picIndex] + searchInput.value);
                        window.location.href = searchArr[picIndex] + searchInput.value;
                        return false;
                    }
                    return true;
                }
            }
        }

    }

}