Servlet+Ajax はスマート検索ボックスのスマートプロンプト機能を実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Servlet+Ajax はスマート検索ボックスのスマートプロンプト機能を実装します

韦小宝

Jan 01, 2018 pm 07:41 PM

成し遂げる検索

この記事では主に、スマート検索ボックスのスマートプロンプト機能を実装するための Servlet+Ajax を紹介します。Ajax に興味がある友人は、スマート検索ボックスのスマートプロンプト機能を実装するための Servlet+Ajax を参照してください。

リフレッシュレステクノロジーを使用して検索ボックスをインテリジェントに変更します。 Baidu 検索と同じです

レンダリング

Servlet+Ajax はスマート検索ボックスのスマートプロンプト機能を実装します

基本原則:

1. 検索ボックスの onkeyup (キーボード入力時)、onfocus (マウスが外側をクリックしたときにプロンプトをクリアする) を記述します。検索ボックス)

2. まずユーザー入力を取得し、取得したデータをサーバーに渡します。バックグラウンドは、処理のためにサーバーからデータを取得し、関連するデータを取得して、json を返します。フロントエンドはコールバック関数を渡し、返されたjsonをテキストに解析し、検索ボックスの下の表示ウィンドウにテキストを転送します

以下はjson

Servlet+Ajax はスマート検索ボックスのスマートプロンプト機能を実装します

searchをサポートするjarパッケージです。 jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax搜索</title>
<script type="text/javascript">
//获得更多关联信息的函数
function getMore(){
 var xmlHttp;
 //首先获得用户的输入
 var content = document.getElementById("keyword");
 if(content.value==""){
  keywordBlur();//执行一下清空方法，使搜索框在无数据的时候，下方残留数据也动态清空
  return;
 }
 //alert(content.value);
 //要给服务器发送用户输入的内容，要创建对象,叫XmlHttp对象
 //xmlHttp=获得XmlHttp对象
 xmlHttp=CreatXMLHttp();
 //alert(xmlHttp);
 //要给服务器发送数据
 var url="serch?keyword="+escape(content.value);
 //如果不用escape这个函数转化一下的话，传中文会有问题
 //true表示javascript的脚本会在send()方法之后继续执行，而不会等待来自服务器的相应
 xmlHttp.open("GET",url,true);
 //xmlHttp绑定一个回调方法去接受服务器传来的相应,会在xmlHttp状态改变的时候被调用
 //xmlHttp有0~4的状态，只关心4的方法
 //4为complete状态，表示交互完成，当交互完成时才会调用回调方法
 xmlHttp.onreadystatechange=callback;
 xmlHttp.send(null);//send里面发送的是内容体，但参数在URL里已经都写完了
 //回调函数==!!注意 这里回调方法要在方法内创建，因为创建的xmlHttp对象不是全局变量
 //是在getMore()方法里创建的，可以将变量提取出来，变成全局变量
 function callback(){
  if (xmlHttp.readyState==4){
   //200代表服务器相应成功。。。404代表资源未找到。。500服务器内部错误
   if(xmlHttp.status==200){
    //交互成功，获得相应的数据，是文本格式
    var result=xmlHttp.responseText;
    //解析json格式
    var json=eval("("+result+")");//要在两边加个小括号，js才能认识
    //获得数据之后就可以开始展示了。在输入框的下边展示
    setContent(json);
   }
  }
 }
 //设置关联数据展示,参数代表的是服务器传递过来的关联数据
 function setContent(contents){
  //setLocation();//设置跟输入框一样宽度
  keywordBlur();//在每次得到值之前先清空一下之前的残留数据
  var size=contents.length;//根据关联的数据长度，来生成多少<tr>
  //设置内容
  for(var i=0;i<size;i++){
   //不用appendChild()方法是因为不同浏览器可能不兼容该方法
   var nextNode=contents[i];//代表json格式的第i个元素 
   var newRow=content_table_body.insertRow();//创建行
   var newCell=newRow.insertCell();//创建单元格
   newCell.innerHTML=contents[i];//将数据赋值给单元格
  } 
 }
}
//获得XmlHttp对象
function CreatXMLHttp(){
 //要考虑不同浏览器的写法
 //大多数浏览器使用
 var xmlHttpReq;
 if(window.XMLHttpRequest){//火狐
  xmlHttpReq=new XMLHttpRequest();
 }else{
  /* if(window.ActiveXObject){
   xmlHttpReq=neww ActiveXObject("Microsoft.XMLHTTP");
   //例如ie有很多版本，不一定能创建出来这个对象，所以要添加以下一个判断
   //换一种方法，保证创建
   if(!xmlHttp){
    xmlHttpReq=new ActiveObject("Msxml2.XMLHTTP");
   }
  } */
  //一定要如下格式写 上述格式火狐IE亲测不好使
   try { //IE
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (e) {
    try {//IE 浏览器
     xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
    }
   }
 }
 return xmlHttpReq;
}
//失去焦点的时候
function keywordBlur(){
 //要获得body的元素长度，才能知道要遍历多少次
  var contentTableBody=document.getElementById("content_table_body"); 
  var size=contentTableBody.childNodes.length; 
   //因为是删除子节点，所以是从后往前才能删，同二叉树，删除子节点
  for(var i=size-1;i>=0;i--){ 
   contentTableBody.removeChild(contentTableBody.childNodes[i]); 
  } 
  document.getElementById("popp").style.border="none"; 
}
</script>
<style type="text/css">
/* #myp{
 position: absolute;
 left:30%;
 top:50%;
 margin-left: 100px;
} */
.mouseOver{
 background: #708090;
 color: #FFFAFA;
}
.mouseOut{
 background: #FFFAFA;
 color: #000000;
}
</style>
</head>
<body>
 <p id="myp">
  <!-- 输入框 -->
  <input type="text" id="keyword" size="50" onblur="keywordBlur()" onkeyup="getMore()" onfocus="getMore()"/>
  <input type="button" value="百度一下" wise="50px">
  <!-- 下面是内容展示的区域 -->
  <p id="popp">
   <table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
    <tbody id="content_table_body">
    <!-- 这个是动态查询出来的数据显示的地方 -->
     <!-- <tr><td>ajax1</td></tr>
    <tr><td>ajax2</td></tr>
    <tr><td>ajax3</td></tr> -->
    </tbody>
   </table>
  </p>
 </p>
</body>
</html>

ログイン後にコピー

SearchServlet.class

package com.ninka;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class SearchServlet extends HttpServlet{
 static List<String> datas = new ArrayList<String>();
 static{
  datas.add("ajax1");
  datas.add("ajax2");
  datas.add("ajax3");
  datas.add("bichi1");
  datas.add("bichi2");
  datas.add("php"); 
  datas.add("javascript"); 
  datas.add("java"); 
  datas.add("html"); 
 }
 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException {
  //设置下编码格式
  request.setCharacterEncoding("UTF-8");
  response.setCharacterEncoding("UTF-8");
  System.out.println("123");
  //首先获得客户端传来的数据,,注意传过来的参数关键字一定要写对，否则会空指针异常
  String keyword = request.getParameter("keyword");
  //获得关键字之后进行处理，得到关联数据
  List<String> listData = getData(keyword);
  //返回json格式
  System.out.println(JSONArray.fromObject(listData));
  //JSONArray.fromObject(listData);
  response.getWriter().write(JSONArray.fromObject(listData).toString());
 }
 //获得关联数据方法
 public List<String> getData(String keyword){
  List<String> list = new ArrayList<String>();
  for(String data:datas){
   //如果传递过来的数据，属于词库里面的话，那么就把包含关键词的数据打包成list，向客户端传
   if(data.contains(keyword)){
    list.add(data);
   }
  }
  return list;
 }
}

ログイン後にコピー

web。！

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7684

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

Xianyu でユーザーを検索する方法 Feb 24, 2024 am 11:25 AM

Xianyu はどのようにしてユーザーを検索しますか?ソフトウェア Xianyu では、ソフトウェア内で通信したいユーザーを直接見つけることができます。しかし、ユーザーを検索する方法がわかりません。検索後にユーザー間で表示するだけです。次は編集部からユーザーへの検索方法についてご紹介しますので、興味のある方はぜひご覧ください！ Xianyu でユーザーを検索するには? 回答: 検索されたユーザーの詳細を表示しますはじめに: 1. ソフトウェアを入力し、検索ボックスをクリックします。 2. ユーザー名を入力し、「検索」をクリックします。 3. 検索ボックスの下の[ユーザー]を選択して、該当するユーザーを検索します。

Baidu の高度な検索の使用方法 Feb 22, 2024 am 11:09 AM

Baidu 詳細検索の使用方法 Baidu 検索エンジンは現在中国で最も一般的に使用されている検索エンジンの 1 つであり、豊富な検索機能を提供しており、その 1 つが詳細検索です。高度な検索は、ユーザーが必要な情報をより正確に検索し、検索効率を向上させるのに役立ちます。では、Baidu の高度な検索を使用するにはどうすればよいでしょうか?最初のステップは、Baidu 検索エンジンのホームページを開くことです。まず、Baidu の公式 Web サイト (www.baidu.com) を開く必要があります。ここが百度検索の入り口です。 2 番目のステップでは、「詳細検索」ボタンをクリックします。 Baidu の検索ボックスの右側に、

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に

PHP プログラミングガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

プログラミング言語 PHP は、さまざまなプログラミングロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素

WPS テーブルで検索しているデータが見つかりません。検索オプションの場所を確認してください。 Mar 19, 2024 pm 10:13 PM

インテリジェンスが支配する時代では、オフィスソフトウェアも普及し、Wps フォームはその柔軟性により大多数のオフィスワーカーに採用されています。仕事では、単純な帳票作成や文字入力だけでなく、実際の業務を遂行するためにより高度な操作スキルを習得することが求められており、データ付きの帳票や帳票を利用することで、より便利で明確、正確なものとなります。今日の教訓は、「WPS テーブルでは、検索しているデータが見つかりません。検索オプションの場所を確認してください。なぜですか?」です。 1. まず Excel テーブルを選択し、ダブルクリックして開きます。次に、このインターフェイスですべてのセルを選択します。 2. 次に、このインターフェースで、上部ツールバーの「ファイル」の「編集」オプションをクリックします。 3. 次に、このインターフェースで「」をクリックします。

モバイルタオバオで店舗を探す方法店舗名の検索方法 Mar 13, 2024 am 11:00 AM

タオバオのモバイルアプリには良い商品がたくさんあります。いつでもどこでも購入でき、すべて正規品です。各商品の価格は明確です。複雑な操作は一切なく、より便利にお買い物をお楽しみいただけます。自由に検索して購入できますさまざまなカテゴリの商品セクションがすべてオープンしています個人の配送先住所と連絡先番号を追加すると、運送会社から連絡があり、最新の物流動向をリアルタイムで確認できます初めて利用する方、商品の検索方法が分からない方でも、もちろん検索バーにキーワードを入力するだけですべての商品が表示されますので、お買い物はもうやめられません。モバイルタオバオユーザーが店舗名を検索するための詳細なオンライン方法を提供します。 1.まず携帯電話でタオバオアプリを開きます。

Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei 携帯電話に WeChat クローン機能を実装する方法ソーシャルソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認するまず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。

Golangで正確な除算演算を実装する方法 Feb 20, 2024 pm 10:51 PM

Golang で正確な除算演算を実装することは、特に財務計算を含むシナリオや高精度の計算が必要なその他のシナリオでよくあるニーズです。 Golang の組み込みの除算演算子「/」は浮動小数点数に対して計算されるため、精度が失われる場合があります。この問題を解決するには、サードパーティのライブラリまたはカスタム関数を使用して、正確な除算演算を実装します。一般的なアプローチは、math/big パッケージの Rat タイプを使用することです。これは分数の表現を提供し、正確な除算演算を実装するために使用できます。

See all articles

Servlet+Ajax はスマート検索ボックスのスマートプロンプト機能を実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Servlet+Ajax はスマート検索ボックスのスマート プロンプト機能を実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Servlet+Ajax はスマート検索ボックスのスマートプロンプト機能を実装します