類似百度搜索下拉框的實現

阿新 • • 發佈：2019-01-12

從百度截圖如下：

要實現的功能與該圖類似，只不過沒有詳細優化樣式。哈哈，大家不要介意。（還有我的這個功能用的是百度的介面）

我用了兩種方式來實現這個功能，一種是原生的js方式，一種是jQuery的方式。可以對比。

1、用原生方式實現。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload=function () {
            var  
oText=document.getElementById("text");
var oList=document.getElementById("list");
oText.oninput=function () {
                let oScript=document.createElement('script');
oScript.src= `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oText.value}&cb=show`;
document.head.appendChild(oScript);
 
}
        }

        function show(json) {
            var oList=document.getElementById("list");
oList.innerHTML='';
json.s.forEach(str=>{
                let oLi=document.createElement('li');
oLi.innerHTML=str;
oList.appendChild(oLi);
})
        }
    </script>
</head>
<body>
<input  
type="text" id="text">
<ul id="list"></ul>
</body>
</html>

2、jQuery方式實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("#text").on('input',function () {
                $.ajax({
                    url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data:{wd:$("#text").val()},
dataType:'jsonp',
jsonp:'cb',
success(json){
                        $("#list").html('');
json.s.forEach(str=>{
                            $(`<li>${str}</li>`).appendTo("#list");
})
                    },
error(err){
                        alert('出錯了');
}

                })
            })
        })
    </script>
</head>
<body>
<input type="text" id="text">
<ul id="list"></ul>
</body>
</html>

以上程式碼執行結果如下：

類似百度搜索下拉框的實現

從百度截圖如下：要實現的功能與該圖類似，只不過沒有詳細優化樣式。哈哈，大家不要介意。（還有我的這個功能用的是百度的介面）我用了兩種方式來實現這個功能，一種是原生的js方式，一種是jQuery的方式。可以對比。1、用原生方式實現。<!DOCTYPE html> &l

百度搜索下拉框效果（鍵盤操作）只完成部分功能，僅供參考

百度推廣：下拉框與相關搜索優化分析

營銷型網站建設競價賬戶托管網站推廣全網營銷我們想要做好百度推廣，就必須根據百度對外展現出來的數據對網站內容進行更新。因為只有這樣，才會讓百度和用戶都漸漸喜歡上我們的網站。那麽，什麽是百度對外展現的數據呢?一個是百度下拉框，一個是百度相關搜索，二者是我們做網站優化一定要分析透徹的。

JS實現輸入框類似百度搜索的智慧提示效果

1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

實現類似百度搜索框中模糊提示功能

通常，在我們使用百度的時候，在輸入框中輸入某一個欄位的時候，就可以查詢到相關的資訊。類似的功能可以通過JS的框架來實現(顯然不會像百度那麼強大)。jquery提供了一種擴充套件外掛。可以實現獲取文字框內容然後自動向後臺提交請求。下面通過一段程式碼來展示這種功能。

Vuejs搜索下拉框

ons ont color model aid methods method 無數據 gray <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JQ模糊匹配（類似百度搜索等）

CSS程式碼 <style type="text/css"> #div_txt { position: relative;

仿百度搜索熱點列表的實現

相信大家都用過百度搜索，其中在百度搜索結果的右側會有一個搜尋熱點的列表。這個搜尋列表中有一個換一換的連結，當我們點選這個連結的時候列表就會更換一次。其實這個互動的實現效果非常的簡單。 html程式碼

selenium定位百度搜索框輸入關鍵字後，下拉框聯想出來的怎麼定位

百度搜索框輸入關鍵字後，下拉框聯想出來的怎麼定位？百度下拉框聯想出來的我們按F12中的箭頭時，下拉框會消失收回去的。這個時候怎麼辦呢解決辦法：就三個步驟 1.在百度搜索框輸入關鍵字“上

js仿百度搜索框

eat ucc txt tex text str jquer nbsp erro 1.js仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

【JavaScript_DOM 百度搜索框】

aid border 哪裏 tps onkeydown otto super arr utf 今天給大家帶來的事一個簡單的百度的歷史搜索框，大家在搜索東西的時候，百度會自動給你顯示你最近搜索過的一些東西，那這個拿js怎麽做呢？我們一起來學習吧這是一個HTML頁面：

【百度搜索框】

add size nts on() post 百度搜索 aid style left html樣式 <div class="img"></div> <div class="yi"> <input type="text" id

React實現百度搜索框

key component rop func tor true syn chan put import React,{Component} from ‘react‘ import ReactDOM,{render} from ‘react-dom‘ import ‘boo

原生JS模擬百度搜索框

相關 class img mouse reat type 歌手 bubuko value 近期有個新入行的小夥伴一直在問一些基礎知識，突然覺得人的記憶力有限，有些平常很少用到的知識點雖簡單卻也其實很容易模糊，或者是一個單詞，或者是一個語法。所以想著應該利用一下工作之余的碎片

互動、事件修飾符練習001 仿百度搜索框

需求: 實現搜尋框的搜尋功能 a) 對使用者在輸入框內輸入的值進行雙向資料繫結 b) 點選"搜尋"按鈕,進行網路請求 c) 將請求回的資料在搜尋框下進行展示實現通過方向鍵控制搜尋選項 a) 繫結上下方向鍵的處理函式 b) 對展示的資料進行樣式繫結程式碼:

實現百度搜索框提示語功能

利用百度jsonp介面實現搜尋提示語. jsonp.js封裝 function jsonp(url, options) { // 建立script標籤 var $script = document.createElement('script'); // 解決快取問題

HTML+CSS第四課2：利用表單標籤製作一個百度搜索框

知識點：表單<form>標籤、<input />標籤的使用。問題描述：在html中製作一個百度搜索框，要求，在搜尋框裡輸入關鍵詞後，點選搜尋，能夠跳轉到百度搜索結果頁面。關鍵程式碼： <form action="http://www.baidu.co

將div固定在頁面最下面、將百度搜索框嵌入頁面

1. div固定在頁面最下面 <div style=" position:fixed;bottom:0;left:0;width: 100%;"> 2. 將百度搜索框嵌入頁面 <style type="text/c

原生AJAX+jsp+servlet實現百度搜索框提示效果

我們這裡使用HTML5的新特性datalist實現輸入框的自動下拉提示，用datalist通過id與input關聯起來，在搜尋時就會出現下拉框。下面是HTML程式碼。　　 <input type="text" size="50" id="sear

模擬百度搜索框

程式碼如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <!-- 總體思路：使用者在文字框裡輸入的是什麼，就

類似百度搜索下拉框的實現

相關推薦