Web Front-end
JS Tutorial
JS implementation method to imitate Google and Baidu search box input information intelligent prompts_javascript skills
JS implementation method to imitate Google and Baidu search box input information intelligent prompts_javascript skills
The example in this article describes the implementation method of JS to implement intelligent prompts for input information imitating Google and Baidu search boxes. Share it with everyone for your reference. The details are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿google、百度搜索框输入信息智能提示的实现</title>
<style type="text/css" media="screen">
body
{
font: 11px arial;
}
.suggest_link
{
width:120px;
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over
{
width:120px;
background-color: #E8F2FE;
padding: 2px 6px 2px 6px;
}
#suggestResult
{
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
/*input*/
.input_on
{
padding: 2px 8px 0pt 3px;
height: 18px;
border: 1px solid #999;
background-color: #FFFFCC;
}
.input_off
{
padding: 2px 8px 0pt 3px;
height: 18px;
border: 1px solid #CCC;
background-color: #FFF;
}
.input_move
{
padding: 2px 8px 0pt 3px;
height: 18px;
border: 1px solid #999;
background-color: #FFFFCC;
}
.input_out
{
/*height:16px;默认高度*/
padding: 2px 8px 0pt 3px;
height: 18px;
border: 1px solid #CCC;
background-color: #FFF;
}
</style>
<script language="javascript" type="text/javascript">
var $ = document.getElementById;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var obj;
if (window.XMLHttpRequest) { //Mozilla 浏览器
obj = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
obj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
obj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
return obj;
}
//当输入框的内容变化时，调用该函数
function searchSuggest() {
var inputField = $("txtSearch");
var suggestText = $("suggestResult");
if (inputField.value.length > 0) {
var o = createXMLHttpRequest();
var url = "SearchResult.ashx?searchText=" + escape(inputField.value);
o.open("GET", url, true);
o.onreadystatechange = function () {
if (o.readyState == 4) {
if (o.status == 200) {
var sourceItems = o.responseText.split("\n");
if (sourceItems.length > 1) {
suggestText.style.display = "";
suggestText.innerHTML = "";
for (var i = 0; i < sourceItems.length - 1; i++) {
var sourceText = sourceItems[i].split("@")[1];
var sourceValue = sourceItems[i].split("@")[0];
var s = "<div onmouseover=\"javascript:suggestOver(this);\" ";
s += " onmouseout=\"javascript:suggestOut(this);\" ";
s += " onclick=\"javascript:setSearch('" + sourceText + "','" + sourceValue + "');\" ";
s += " class=\"suggest_link\" >" + sourceText + "</div>";
suggestText.innerHTML += s;
}
}
else {
suggestText.style.display = "none";
}
}
}
}; //指定响应函数
o.send(null); // 发送请求
}
else {
suggestText.style.display = "none";
}
}
function delayExecute() {
$("valueResult").value = "";
window.setTimeout(function () { searchSuggest() }, 800);
//延时处理
}
function suggestOver(div_value) {
div_value.className = "suggest_link_over";
}
function suggestOut(div_value) {
div_value.className = "suggest_link";
}
function setSearch(a, b) {
$("txtSearch").value = a;
$("valueResult").value = b;
var div = $("suggestResult");
div.innerHTML = "";
div.style.display = "none";
}
function showResult() {
alert($("txtSearch").value + $("valueResult").value);
}
</script>
</head>
<body>
<form id="form1" action="">
<input type="text" id="txtSearch" name="txtSearch" onkeyup="delayExecute();" size="20"
class="input_out" onfocus="this.className='input_on';this.onmouseout=''"
onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};"
onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" />
<input type="hidden" id="valueResult" name="valueResult" value="" />
<br />
<div id="suggestResult" style="display: none">
</div>
<br/>
<input id="button1" type="button" value="提交" onclick="showResult();" />
</form>
</body>
</html>Server-side C# code
<%@ WebHandler Language="C#" Class="SearchResult" %>
using System;
using System.Web;
using System.Data;
public class SearchResult : IHttpHandler {
public void ProcessRequest (HttpContext context) {
object QueryWord=context.Request.QueryString["searchText"];
if (QueryWord != null)
{
if (QueryWord.ToString().Trim().Length > 0)
{
DataTable dt = getDB();
string returnText = "";
if (dt != null && dt.Rows.Count > 0)
{
DataRow[] dr = dt.Select(" name like '%" + QueryWord .ToString()+ "%' ");
if (dr.Length > 0)
{
for (int i = 0; i < dr.Length; i++)
{
//可设置返回多字符串
returnText += dr[i]["id"].ToString() + "@" + dr[i]["name"].ToString() + "\n";
}
}
}
context.Response.Write(returnText);
context.Response.End();
}
}
}
public bool IsReusable {
get {
return false;
}
}
/// <summary>
/// 获取数据源的方法
/// </summary>
/// <returns>数据源</returns>
private DataTable getDB()
{
DataTable dt = new DataTable();
dt.Columns.Add("id");
dt.Columns.Add("name");
dt.Columns.Add("age");
dt.Rows.Add(new object[] { "000001", "张三", "26" });
dt.Rows.Add(new object[] { "000002", "张晓", "26" });
dt.Rows.Add(new object[] { "000003", "张岚", "27" });
dt.Rows.Add(new object[] { "000004", "李四", "25" });
dt.Rows.Add(new object[] { "000005", "李星", "27" });
return dt;
}
}I hope this article will be helpful to everyone’s JavaScript programming design.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1374
52
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
After 2 months, the humanoid robot Walker S can fold clothes
Apr 03, 2024 am 08:01 AM
Editor of Machine Power Report: Wu Xin The domestic version of the humanoid robot + large model team completed the operation task of complex flexible materials such as folding clothes for the first time. With the unveiling of Figure01, which integrates OpenAI's multi-modal large model, the related progress of domestic peers has been attracting attention. Just yesterday, UBTECH, China's "number one humanoid robot stock", released the first demo of the humanoid robot WalkerS that is deeply integrated with Baidu Wenxin's large model, showing some interesting new features. Now, WalkerS, blessed by Baidu Wenxin’s large model capabilities, looks like this. Like Figure01, WalkerS does not move around, but stands behind a desk to complete a series of tasks. It can follow human commands and fold clothes
deepseek web version entrance deepseek official website entrance
Feb 19, 2025 pm 04:54 PM
DeepSeek is a powerful intelligent search and analysis tool that provides two access methods: web version and official website. The web version is convenient and efficient, and can be used without installation; the official website provides comprehensive product information, download resources and support services. Whether individuals or corporate users, they can easily obtain and analyze massive data through DeepSeek to improve work efficiency, assist decision-making and promote innovation.
Introduction to how to obtain Baidu Xiyang Shells
Mar 28, 2024 am 09:11 AM
There are many users in Xirang who don’t know where the shells are and how to get them. Some players have been searching for several hours but still can’t find them. Below, the editor will introduce how to obtain Baidu Xirang shells. Come and take a look. . How to get Baidu Xirang Shell 1. First we need to come to the community, and then come to the location in the picture below. 2. Select the destination here and choose to enter the 188th floor. 3. After entering the 188th floor, you will see this prompt when walking around. Just click I Got It. 4. The location of the shell may be a little difficult to find. Just behind the 188 elevator, there is a small glowing dot that is the shell. 5. You need to use a VR controller to pick up shells. Just click on the shell. Redemption method 1. First click the "Settings" icon in the upper right corner of the page and select "
Baidu Apollo releases Apollo ADFM, the world's first large model that supports L4 autonomous driving
Jun 04, 2024 pm 08:01 PM
On May 15, Baidu Apollo held Apollo Day 2024 in Wuhan Baidu Luobo Automobile Robot Zhixing Valley, comprehensively demonstrating Baidu's major progress in autonomous driving over the past ten years, bringing technological leaps based on large models and a new definition of passenger safety. With the world's largest autonomous vehicle operation network, Baidu has made autonomous driving safer than human driving. Thanks to this, safer, more comfortable, green and low-carbon travel methods are turning from ideal to reality. Wang Yunpeng, vice president of Baidu Group and president of the Intelligent Driving Business Group, said on the spot: "Our original intention to build autonomous vehicles is to satisfy people's growing yearning for better travel. People's satisfaction is our driving force. Because safety, So beautiful, we are happy to see
Baidu Robin Li led a team to visit PetroChina to discuss the intelligence of the oil and gas industry
May 07, 2024 pm 06:13 PM
According to news from this site on May 7, on May 6, Robin Li, founder, chairman and CEO of Baidu, led a team to visit China National Petroleum Corporation (hereinafter referred to as "PetroChina") in Beijing and met with directors of China National Petroleum Corporation Chairman and Party Secretary Dai Houliang held talks. The two parties had in-depth exchanges on strengthening cooperation and promoting the deep integration of the energy industry with digital intelligence. PetroChina will accelerate the construction of a digital China Petroleum Corporation, strengthen cooperation with Baidu Group, promote the in-depth integration of the energy industry with digital intelligence, and make greater contributions to ensuring national energy security. Robin Li said that the "intelligent emergence" and core capabilities of understanding, generation, logic, and memory displayed by large models have opened up a broader space for imagination for the combination of cutting-edge technology and oil and gas business. Always
The relationship between js and vue
Mar 11, 2024 pm 05:21 PM
The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.
It is reported that the Chinese version of Samsung Galaxy S24 series mobile phone 'Search in Circle” will support Google search
Jun 01, 2024 am 09:54 AM
According to news on May 31, blogger @ibinguniverse broke the news today that the Chinese version of Samsung Galaxy S24 series mobile phones will support Google search. The blogger did not disclose the specific launch time. According to Samsung’s previous introduction, the Samsung Galaxy S24 series has been equipped with many high-level AI capabilities, AI-based practical functions such as input, translation, recorder, notes, and cameras, to provide users with a more convenient and efficient comprehensive experience. Different from the overseas version, most of the AI functions of the Samsung Galaxy S24 series are provided by domestic manufacturers, such as Baidu. Previously reported, Galaxy AI deeply integrates multiple capabilities of Baidu Wenxin large model, which can provide end-side enabled call and translation functions, as well as intelligent summary brought by generative AI.
