JavaScript笔记-使用Jsonp获取百度搜索提示

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

原理说白了就是发送一个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;
                }
            }
        }
 
    }
 
}