ホームページ ウェブフロントエンド jsチュートリアル Baidu のようなあいまい検索ドロップダウン リストをシミュレートする Google_JavaScript スキル

Baidu のようなあいまい検索ドロップダウン リストをシミュレートする Google_JavaScript スキル

May 16, 2016 pm 04:52 PM
ドロップダウンリスト あいまい検索

コードをコピー コードは次のとおりです:

// JavaScript Document
function onChangehoverLi(thisLi) {
$("#searchtext").val($(thisLi).html());
$("#suggest_ul").hide(0);
validateform2(); }

$(function(){
//ロード時にドロップダウン li を非表示にする
$("#suggest_ul").hide(0);
}); >
/ /Ajax はキーワードを動的に取得します

//テキスト ボックスの入力変更をリッスンします

function fuzzySearch(){

//ajax オブジェクト関数を作成します
function createLink(){
if(window.ActiveXObject){
var newRequest = new ActiveXObject("Microsoft.XMLHTTP")
}else{
var newRequest = new XMLHttpRequest(); >}
return newRequest;
}

//テキスト ボックスが空の場合は、リクエストを送信しません
if($("#searchtext").val().length ==0||$(" #searchtext").val().length>10){
$("#suggest_ul").hide(0);
return; //リクエストを送信します
http_request = createLink();//Ajaxオブジェクトを作成します
if(http_request){
var sid = $("#searchtext").val(); = "contentSearchAction!getSynonyms.action" ;
var data = "keywords=" encodeURI(sid);
//alert(data)
http_request.open("post",url,true); 🎜>http_request.setRequestHeader("content -type","application/x-www-form-urlencoded");

//サーバーから返された結果を処理する関数を指定します
http_request.onreadystatechange = dealresult; //この関数には括弧は必要ありません
//リクエストを送信します
http_request.send(data)
}

//返された結果を処理します
関数(){
if(http_request.readyState== 4){
//200 に等しい場合は成功を意味します
if(http_request.status==200){
if(http_request.responseText==" no"){
$("#suggest_ul") .hide(0);
return;

}
$("#suggest_ul").show(0);
var res = eval("(" http_request.responseText ") ");
var content=""
for(var i=0;ivar キーワード= res[i].keywords;
contents=contents "
  • " キーワード "
  • ";

    }
    $("#suggest_ul").html(contents);


    }
    }
    }

    }
    //Mouse
    $(function(){

    //キーを押してから 300 ミリ秒後にドロップダウン プロンプトを表示します
    $("#searchtext").keyup(function(){
    setInterval(changehover,300);
    function changehover() {
    $("#suggest_ul li").hover(function(){ $(this).css("background","#eee) ");},function(){ $(this).css("background","#fff");});
    }
    });

    });


    ページ:




    コードをコピー


    コードは次のとおりです:
    searchSuggest</title> ; </span><link href="css/searchSuggest.css" type="text/css" rel="stylesheet" > </res.length> </div><script type="text/javascript" src="js/jquery- 1.7.1.js"></script> <div class="codebody" id="code74018"><script type="text/javascript" src="js /searchSuggest.js"></script> <br><style> <br>#suggest_ul{ <br>width:100%; <br>max-height:223px; <br>margin:0px; <br>パディング:0px; <br>ボーダー:1px ソリッド #ccc; <br>リストスタイルタイプ:なし; <br><br><br> #suggest_ul li{ <br>パディング左:5px; <br>フォントサイズ:13px; <br>高さ:22px; :default; <br>} <br> <br><br><body> ;form action="deal.php" method="get" id="suggest_form"> ; <br><input type="text" id="searchtext" name="searchtext" autocomplete="off" value="検索..." oninput="fuzzySearch();" onblur="if(this.value==''){this.value='検索...'}" onfocus="if(this.value==') search...'){this.value=''}"/> <br><input type="submit" value="Search" id="suggest_submit" /> <br></form> <br><ul id="suggest_ul"> <br></ul> <br><br><br></html> ><br><br>使用中に、中国語を入力するときに iOS システムに付属する入力メソッドが onkeyup イベントでも onchange イベントでもないことに気づきました。これは、ユーザーが最初にボタンを押したためです。仮想キーボード。<br><br>中国語が表示されたら、[中国語] をクリックして、入力ボックスの値を中国語に変更できます。Onchange では、スクリプトによって変更された入力ボックスの値をキャプチャできません。 <br><br>最後の解決策は、oninput イベントを使用することです。このイベントは最新の HTML5 では非常に簡単に使用できますが、一部の下位バージョンのブラウザーには互換性がないのが厄介です。</div> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796793874.html" title="KB5055523を修正する方法Windows 11にインストールできませんか?" class="phpgenera_Details_mainR4_bottom_title">KB5055523を修正する方法Windows 11にインストールできませんか?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796793871.html" title="KB5055518を修正する方法Windows 10にインストールできませんか?" class="phpgenera_Details_mainR4_bottom_title">KB5055518を修正する方法Windows 10にインストールできませんか?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796791957.html" title="<🎜>:死んだレール - オオカミの飼い主" class="phpgenera_Details_mainR4_bottom_title"><🎜>:死んだレール - オオカミの飼い主</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796792155.html" title="R.E.P.O.のすべての敵とモンスターの強度レベル" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.のすべての敵とモンスターの強度レベル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796797907.html" title="<🎜>:庭を育てる - 完全な突然変異ガイド" class="phpgenera_Details_mainR4_bottom_title"><🎜>:庭を育てる - 完全な突然変異ガイド</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2週間前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/article.html">もっと見る</a> </div> </div> </div> --> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットAIツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>リアルなヌード写真を作成する AI 搭載アプリ</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>写真から衣服を削除するオンライン AI ツール。</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>脱衣画像を無料で</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI衣類リムーバー</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/ai">もっと見る</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796793874.html" title="KB5055523を修正する方法Windows 11にインストールできませんか?" class="phpgenera_Details_mainR4_bottom_title">KB5055523を修正する方法Windows 11にインストールできませんか?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796793871.html" title="KB5055518を修正する方法Windows 10にインストールできませんか?" class="phpgenera_Details_mainR4_bottom_title">KB5055518を修正する方法Windows 10にインストールできませんか?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796791957.html" title="<🎜>:死んだレール - オオカミの飼い主" class="phpgenera_Details_mainR4_bottom_title"><🎜>:死んだレール - オオカミの飼い主</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796792155.html" title="R.E.P.O.のすべての敵とモンスターの強度レベル" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.のすべての敵とモンスターの強度レベル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796797907.html" title="<🎜>:庭を育てる - 完全な突然変異ガイド" class="phpgenera_Details_mainR4_bottom_title"><🎜>:庭を育てる - 完全な突然変異ガイド</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2週間前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/article.html">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title"> <h3>メモ帳++7.3.1</h3> </a> <p>使いやすく無料のコードエディター</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中国語版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 中国語版</h3> </a> <p>中国語版、とても使いやすい</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title"> <h3>ゼンドスタジオ 13.0.1</h3> </a> <p>強力な PHP 統合開発環境</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title"> <h3>ドリームウィーバー CS6</h3> </a> <p>ビジュアル Web 開発ツール</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神レベルのコード編集ソフト(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/ai">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>ホットトピック</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/java-tutorial" title="Java チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Java チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1655</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1414</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1307</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1254</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/c-tutorial" title="C# チュートリアル" class="phpgenera_Details_mainR4_bottom_title">C# チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1228</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>24</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/faq/zt">もっと見る</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/622648.html" title="CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/169829417425826.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法" /> </a> <a href="https://www.php.cn/ja/faq/622648.html" title="CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法" class="phphistorical_Version2_mids_title">CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法</a> <span class="Articlelist_txts_time">Oct 26, 2023 pm 12:22 PM</span> <p class="Articlelist_txts_p">CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法。Web デザインでは、ドロップダウン リスト (DropdownList) は一般的な対話型要素の 1 つです。ユーザーの操作を容易にするオプションの選択機能を提供します。ただし、ブラウザのデフォルトのドロップダウン リスト スタイルはデザインのニーズを満たしていない可能性があるため、CSS を使用してカスタム スタイルを設定する必要があります。この記事では、CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法を、具体的なコード例とともに紹介します。基本的な HTML 構造の作成 まず、</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/586172.html" title="PHPでAmap APIを使用して地名のあいまい検索を実装する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169078400416895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="PHPでAmap APIを使用して地名のあいまい検索を実装する方法" /> </a> <a href="https://www.php.cn/ja/faq/586172.html" title="PHPでAmap APIを使用して地名のあいまい検索を実装する方法" class="phphistorical_Version2_mids_title">PHPでAmap APIを使用して地名のあいまい検索を実装する方法</a> <span class="Articlelist_txts_time">Jul 31, 2023 pm 02:13 PM</span> <p class="Articlelist_txts_p">PHP で Amap API を使用して地名のあいまい検索を実装する方法の概要: 地理的位置に基づいてアプリケーションを開発する場合、ユーザーが入力した地名に基づいてあいまい検索を実行し、検索結果を返すことが必要になる場合があります。 。 Amap は、この機能を簡単に実装できる豊富な API セットを提供します。この記事では、PHP で Amap API を使用して地名のあいまい検索を実装する方法とコード例を紹介します。手順: Amap API の開発者キーを取得します。まず、Amap オープン プラットフォームを開く必要があります。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/586058.html" title="Java コードを使用して Baidu Maps 上の場所のあいまい検索を実装するにはどうすればよいですか?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169073111830847.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java コードを使用して Baidu Maps 上の場所のあいまい検索を実装するにはどうすればよいですか?" /> </a> <a href="https://www.php.cn/ja/faq/586058.html" title="Java コードを使用して Baidu Maps 上の場所のあいまい検索を実装するにはどうすればよいですか?" class="phphistorical_Version2_mids_title">Java コードを使用して Baidu Maps 上の場所のあいまい検索を実装するにはどうすればよいですか?</a> <span class="Articlelist_txts_time">Jul 30, 2023 pm 11:31 PM</span> <p class="Articlelist_txts_p">Java コードを使用して Baidu Maps 上の場所のあいまい検索を実装するにはどうすればよいですか?インターネットの発展に伴い、地理的位置情報に対する人々の要求もますます高まっています。たとえば、近くのレストラン、ホテル、その他の特定の場所をキーワードで検索する必要がある場合があります。 Baidu Maps は豊富な位置検索機能を提供しており、Java コードと Baidu Map API を組み合わせて使用​​すると、位置のあいまい検索を簡単に実装できます。以下では、Java コードを使用して百度地図上の場所のあいまい検索を実装する方法を紹介します。まず必要なのは、</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/699856.html" title="PHPであいまい検索機能を実装する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170969491124660.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="PHPであいまい検索機能を実装する方法" /> </a> <a href="https://www.php.cn/ja/faq/699856.html" title="PHPであいまい検索機能を実装する方法" class="phphistorical_Version2_mids_title">PHPであいまい検索機能を実装する方法</a> <span class="Articlelist_txts_time">Mar 06, 2024 am 11:15 AM</span> <p class="Articlelist_txts_p">PHP でのあいまい検索機能の実装は、特に検索機能を含む Web サイトまたはアプリケーションを開発する場合によく必要となります。あいまい検索を使用すると、ユーザーは必要な情報をより迅速かつ正確に見つけることができます。ここでは、PHPにおけるあいまい検索機能の実装方法と具体的なコード例を紹介します。 1. データベースの準備 まず、検索するデータを保存するデータベース テーブルを用意する必要があります。この例では、次のフィールドを持つ products というテーブルがあると仮定します: id: productI</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/589482.html" title="PHP フォーム処理: 複数選択ボックス、ラジオ ボタン、ドロップダウン リストの使用に関するヒント" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/169142216037811.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="PHP フォーム処理: 複数選択ボックス、ラジオ ボタン、ドロップダウン リストの使用に関するヒント" /> </a> <a href="https://www.php.cn/ja/faq/589482.html" title="PHP フォーム処理: 複数選択ボックス、ラジオ ボタン、ドロップダウン リストの使用に関するヒント" class="phphistorical_Version2_mids_title">PHP フォーム処理: 複数選択ボックス、ラジオ ボタン、ドロップダウン リストの使用に関するヒント</a> <span class="Articlelist_txts_time">Aug 07, 2023 pm 11:29 PM</span> <p class="Articlelist_txts_p">PHP フォーム処理: 複数選択ボックス、ラジオ ボタン、ドロップダウン リストの使用に関するヒント Web 開発において、フォームはユーザーが Web サイトと対話するための重要な方法の 1 つです。フォーム内の複数選択ボックス、ラジオ ボタン、ドロップダウン リストは、一般的なユーザー入力オプションの一部です。この記事では、PHP を使用してこれらのフォーム要素を処理する方法と、対応するコード例を紹介します。複数選択ボックス 複数選択ボックスを使用すると、ユーザーは複数のオプションを選択できます。 HTML では、&lt;inputtype="checkbox"&g を使用できます。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/644252.html" title="あいまい検索と正確なマッチング、Youkuの「AI映画検索」はユーザーの映画探しの難しさを解決します" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170468071848607.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="あいまい検索と正確なマッチング、Youkuの「AI映画検索」はユーザーの映画探しの難しさを解決します" /> </a> <a href="https://www.php.cn/ja/faq/644252.html" title="あいまい検索と正確なマッチング、Youkuの「AI映画検索」はユーザーの映画探しの難しさを解決します" class="phphistorical_Version2_mids_title">あいまい検索と正確なマッチング、Youkuの「AI映画検索」はユーザーの映画探しの難しさを解決します</a> <span class="Articlelist_txts_time">Jan 08, 2024 am 10:25 AM</span> <p class="Articlelist_txts_p">「ドラマを見るのに2時間、食事するのに5分」という状況に遭遇したことはありますか?あるあらすじのシーンが気になっているのに、映画の名前を忘れてしまったという経験はありませんか?現代の若者は、ドラマを追いかけたり、映画を観たりする際に「映画が見つからない」という問題によく遭遇します。 Youku は本日、インターネット初の AI 会話型映画およびテレビ検索エンジン「AI Movie Search」を開始しました。ユーザーはYouku APPの検索バーにある「AI」ボタンをクリックするだけで会話ページにアクセスできます。漠然とした口語的な質問を通じて、ユーザーは映画やテレビの情報を正確に取得し、ネットワーク全体で映画やテレビの知識について AI とコミュニケーションをとることができます。この機能の開始により、ユーザーはより便利でインテリジェントな映画とテレビの検索体験を提供します。 Youku が開始した最新の機能は、ネチズンの間で激しい議論を引き起こしました。ネチズンは「新機能は素晴らしい!必要なのは簡単なことだけだ」と述べた。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/615917.html" title="PHP の Elasticsearch に基づくあいまい検索とセマンティック検索の実装" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169629348735789.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="PHP の Elasticsearch に基づくあいまい検索とセマンティック検索の実装" /> </a> <a href="https://www.php.cn/ja/faq/615917.html" title="PHP の Elasticsearch に基づくあいまい検索とセマンティック検索の実装" class="phphistorical_Version2_mids_title">PHP の Elasticsearch に基づくあいまい検索とセマンティック検索の実装</a> <span class="Articlelist_txts_time">Oct 03, 2023 am 08:37 AM</span> <p class="Articlelist_txts_p">Elasticsearch に基づくあいまい検索やセマンティック検索を PHP で実装するには、具体的なコード例が必要ですが、現代のインターネット環境において、検索機能はさまざまなアプリケーションに必要な機能の 1 つとなっています。従来のあいまい検索では、キーワードに基づく単純な一致しか実行できないことが多く、ユーザーの意図を理解できませんでした。セマンティック検索により、ユーザーの意図をより適切に捉え、より正確な検索結果を提供できます。この記事では、PHP で Elasticsearch を活用する方法について説明します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/603669.html" title="HTML のドロップダウン リストにオプションを含めるにはどうすればよいですか?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169405735022258.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML のドロップダウン リストにオプションを含めるにはどうすればよいですか?" /> </a> <a href="https://www.php.cn/ja/faq/603669.html" title="HTML のドロップダウン リストにオプションを含めるにはどうすればよいですか?" class="phphistorical_Version2_mids_title">HTML のドロップダウン リストにオプションを含めるにはどうすればよいですか?</a> <span class="Articlelist_txts_time">Sep 07, 2023 am 11:29 AM</span> <p class="Articlelist_txts_p">ドロップダウン リストにオプションを含めるには、HTML でタグを使用します。 HTML タグは、ドロップダウン リストのオプションを定義するためにフォームで使用されます。 HTML タグは、次の追加属性もサポートしています。 - 属性 値 説明 無効 無効 入力コントロール。ボタンはユーザーからの変更を受け付けません。また、フォーカスを受け取ることができず、タブ移動でもスキップされます。ラベル テキストは、使用時に使用するラベルを定義します。選択済み 選択済みは、ページのロード時に選択されるデフォルトのオプションを定義します。値テキストは、サーバーに送信されるオプション値を指定します。 例 次のコードを実行して、HTML の要素を実装してみることができます - <!DOCTYPEhtml><html> <he</p> </div> </div> <a href="https://www.php.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p> </div> <div class="footermid"> <a href="https://www.php.cn/ja/about/us.html">私たちについて</a> <a href="https://www.php.cn/ja/about/disclaimer.html">免責事項</a> <a href="https://www.php.cn/ja/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1746413666"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时,取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则,保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>