如何用Js实现百度搜索框提示功能
这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来 。
JSONP(JSONwith Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
回调函数：当一个函数作为另一个函数的参数时，那么这个函数就是回调函数。
效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wei{
width:500px;
height:600px;
border:0px solid gray;
position: relative;
margin: 300px auto;
}
#text{
width:476px;
height:50px;
line-height: 50px;
padding-left:20px;
font-size: 16px;
position: absolute;
}
#list{
height:auto;
border:1px solid #ccc;
display: none;
position: absolute;
top: 53px;
}
#wei ul li{
width:498px;
height:30px;
line-height: 30px;
text-indent:10px;
font-size: 16px;
list-style: none;
color: #000;
}
#wei ul li a{
text-decoration:none;
color: #000;
}
#wei ul li:hover{
display:block;
background:#ccc;
color:#fff;
}
#btn{
width: 80px;
height: 54px;
background: deepskyblue;
outline: none;
border: 0;
position: absolute;
left: 500px;
color: #fff;
}
p{
height: 58px;
}
</style>
</head>
<body ng-controller="show">
<p id="wei">
<p>
<input type="text" id="text">
<input type="button" name="btn" id="btn" value="百度一下" />
</p>
<ul id="list"></ul>
</p>
<script type="text/javascript">
var txt = document.getElementById("text");
var oUl = document.getElementById("list");
var oBtn = document.getElementById("btn");
txt.onkeyup = function(){
oUl.innerHTML = "";
var val = txt.value;
var oScript = document.createElement("script");//动态创建script标签
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback";
//添加链接及回调函数
document.body.appendChild(oScript);//添加script标签
document.body.removeChild(oScript);//删除script标签
}
//回调函数
function callback(data){
data.s.forEach(function(value){
var oLi = document.createElement("li");
oLi.innerHTML = "<a href=\"https://www.baidu.com/s?wd="+ value + "\">"+ value + "</a>";
oUl.appendChild(oLi);
})
oUl.style.display = "block";
}
//点击跳转到百度页面，并搜索其中内容
oBtn.onclick = function(){
var val = txt.value;
location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3";
}
</script>
</body>
</html>Atas ialah kandungan terperinci 如何用Js实现百度搜索框提示功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi?
Mar 13, 2024 pm 05:00 PM
Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi? Apabila kami menggunakan Google Chrome untuk membuka tab baharu, kadangkala kami menemui gesaan bahawa kandungan tab ini sedang dikongsi. Jadi, apakah yang sedang berlaku? Biarkan tapak ini menyediakan pengguna dengan pengenalan terperinci kepada masalah Google Chrome yang menggesa kandungan tab ini dikongsi. Google Chrome menggesa bahawa kandungan tab ini sedang dikongsi Penyelesaian: 1. Buka Google Chrome Anda boleh melihat tiga titik di sudut kanan atas pelayar "Sesuaikan dan kawal Google Chrome". ikon itu. 2. Selepas mengklik, tetingkap menu Google Chrome akan muncul di bawah, dan tetikus akan beralih ke "Lagi Alat"
Bagaimana untuk mencari pengguna di Xianyu
Feb 24, 2024 am 11:25 AM
Bagaimanakah Xianyu mencari pengguna? Dalam perisian Xianyu, kami boleh mencari secara langsung pengguna yang kami ingin berkomunikasi dalam perisian. Tetapi saya tidak tahu cara mencari pengguna. Lihat sahaja di kalangan pengguna selepas mencari. Seterusnya ialah pengenalan yang editor bawa kepada pengguna tentang cara mencari pengguna Jika anda berminat, datang dan lihat! Bagaimana untuk mencari pengguna di Xianyu Jawapan: Lihat butiran di kalangan pengguna yang dicari Pengenalan: 1. Masukkan perisian dan klik pada kotak carian. 2. Masukkan nama pengguna dan klik Cari. 3. Kemudian pilih [Pengguna] di bawah kotak carian untuk mencari pengguna yang sepadan.
Cara menggunakan carian lanjutan Baidu
Feb 22, 2024 am 11:09 AM
Cara menggunakan Carian Terperinci Baidu Enjin carian Baidu kini merupakan salah satu enjin carian yang paling biasa digunakan di China. Ia menyediakan pelbagai fungsi carian, salah satunya ialah carian lanjutan. Carian lanjutan boleh membantu pengguna mencari maklumat yang mereka perlukan dengan lebih tepat dan meningkatkan kecekapan carian. Jadi, bagaimana untuk menggunakan carian lanjutan Baidu? Langkah pertama ialah membuka halaman utama enjin carian Baidu. Pertama, kita perlu membuka laman web rasmi Baidu, iaitu www.baidu.com. Ini adalah pintu masuk ke carian Baidu. Dalam langkah kedua, klik butang Carian Terperinci. Di sebelah kanan kotak carian Baidu, terdapat
Jadual WPS tidak dapat mencari data yang anda cari, sila semak lokasi pilihan carian
Mar 19, 2024 pm 10:13 PM
Dalam era yang dikuasai oleh kecerdasan, perisian pejabat juga telah menjadi popular, dan borang Wps diterima pakai oleh majoriti pekerja pejabat kerana fleksibiliti mereka. Di tempat kerja, kita dikehendaki bukan sahaja untuk belajar membuat borang yang mudah dan memasukkan teks, tetapi juga untuk menguasai lebih banyak kemahiran operasi untuk menyelesaikan tugasan dalam kerja sebenar Laporan dengan data dan menggunakan borang adalah lebih mudah, jelas dan tepat. Pelajaran yang kami bawa kepada anda hari ini ialah: Jadual WPS tidak dapat mencari data yang anda cari. Mengapa sila semak lokasi pilihan carian? 1. Mula-mula pilih jadual Excel dan klik dua kali untuk membukanya. Kemudian dalam antara muka ini, pilih semua sel. 2. Kemudian dalam antara muka ini, klik pilihan "Edit" dalam "Fail" dalam bar alat atas. 3. Kedua, dalam antara muka ini, klik "
Bagaimana untuk mencari kedai di Taobao mudah alih Bagaimana untuk mencari nama kedai
Mar 13, 2024 am 11:00 AM
Perisian aplikasi Taobao mudah alih menyediakan banyak produk yang bagus Anda boleh membelinya pada bila-bila masa dan di mana-mana sahaja, dan semuanya adalah tulen. Anda boleh mencari dan membeli secara bebas mengikut kehendak anda. Bahagian produk dalam kategori yang berbeza semuanya terbuka pengguna menggunakannya untuk kali pertama Jika anda tidak tahu bagaimana untuk mencari produk, sudah tentu anda hanya perlu memasukkan kata kunci dalam bar carian untuk mencari semua hasil produk Anda tidak boleh berhenti membeli-belah editor akan menyediakan kaedah dalam talian terperinci untuk pengguna Taobao mudah alih mencari nama kedai. 1. Mula-mula buka aplikasi Taobao pada telefon bimbit anda,
Apl Baidu Tieba menggesa bahawa operasi itu terlalu kerap, apa masalahnya?
Apr 01, 2024 pm 05:06 PM
Apl Baidu Tieba menggesa bahawa operasi adalah terlalu kerap Gesaan ini biasanya untuk mengekalkan operasi biasa dan pengalaman pengguna platform untuk mengelakkan spam skrin berniat jahat, spam pengiklanan dan tingkah laku lain yang tidak sesuai, anda boleh membaca tutorial yang dikongsi oleh editor. Apl Baidu Tieba menggesa bahawa operasi itu terlalu kerap Berkongsi cara menanganinya 1. Apabila sistem menggesa [Operasi terlalu kerap], kami perlu menunggu seketika, anda boleh melakukan sesuatu yang lain dahulu. Secara amnya, selepas menunggu seketika, mesej gesaan ini akan Ia akan hilang secara automatik dan kita boleh menggunakannya seperti biasa. 2. Jika selepas menunggu lama, ia masih memaparkan [Operation Too Frequent], kita boleh cuba pergi ke Tieba Emergency Bar, Tieba Feedback Bar dan Tieba rasmi yang lain, pos untuk melaporkan fenomena ini dan minta kakitangan rasmi menyelesaikannya. 3.
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Apakah kekunci pintasan carian Excel?
Mar 20, 2024 am 10:52 AM
Ingin tahu apakah kekunci pintasan carian Excel? Jawapannya mudah, hanya gunakan [Ctrl+F] untuk melakukan carian pantas. Kami sering menggunakan Excel untuk merekodkan banyak data dan nama yang berbeza Jika kami perlu menukarnya, ia akan menyusahkan kami untuk mencari kerana terdapat terlalu banyak data, dan agak menyusahkan untuk mencari. Malah, kita boleh menggunakan pintasan carian pantas untuk mencari data yang perlu kita ubah! Jadi, apakah kekunci pintasan carian dalam Excel? Hari ini saya akan mengajar anda cara menggunakan kekunci carian pintasan dalam jadual excel untuk menjimatkan masa dan usaha anda dalam kerja anda. Di sini saya menggunakan versi Microsoft Office excel 2010 ini untuk demonstrasi Pelajar yang memerlukannya boleh
