jQueryプラグインautocomplete_jqueryの使い方を詳しく解説-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryプラグインautocomplete_jqueryの使い方を詳しく解説

PHP中文网

May 16, 2016 pm 06:30 PM

jquery

この記事では、主に jQuery プラグインのオートコンプリートの使用方法を詳しく紹介します。興味のある方は参照してください。

オートコンプリートクエリは、Google 検索ボックスと同じようにプロジェクトで使用されることがあります。淘宝網の商品検索機能では、漢字または文字を入力すると、その漢字または文字で始まる関連エントリが表示され、ユーザーが選択できるようになります。オートコンプリートプラグインはこの機能を完了します。

オートコンプリート公式 Web サイト: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (jQuery オートコンプリートプラグインがダウンロードできます)。

淘宝商品検索機能効果:

オートコンプリートプラグインを使用して同様の効果を実現しましょう。

1. AjaxPage.aspx ページを作成し、その中に WebMethod メソッドを定義して、検索ページに必要な入力ボックスのすべてのプロンプトエントリを返します。 背景コードは次のとおりです:

using System.Collections.Generic;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Web.Services;
 
 public partial class AjaxPage : System.Web.UI.Page
 {
  [WebMethod]
  public static string GetAllHints()
  {
   Dictionary<string, string> data = new Dictionary<string, string>();
   data.Add("苹果4代iphone正品", "21782");
   data.Add("苹果4代 手机套", "238061");
   data.Add("苹果4", "838360");
   data.Add("苹果皮", "242721");
   data.Add("苹果笔记本", "63348");
   data.Add("苹果4s", "24030");
   data.Add("戴尔笔记本", "110105");
   data.Add("戴尔手机", "18870");
   data.Add("戴尔键盘", "30367");
 
   DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());
 
   using (MemoryStream ms = new MemoryStream())
   {
    serializer.WriteObject(ms, data);
    return System.Text.Encoding.UTF8.GetString(ms.ToArray());
   }
  }
 }

注: データこのメソッドによって返される形式は json 文字列です。

2. 検索ページ Index.aspx を作成します。フロントエンドコードは次のとおりです:

<!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 runat="server">
  <title></title>
 <link rel="Stylesheet" href="Styles/jquery.autocomplete.css" />
 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
 <script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
 <script type="text/javascript">
  var v = 1;
  $(document).ready(function () {
   $.ajax({
    type: "POST",
    contentType: "application/json",
    url: "AjaxPage.aspx/GetAllHints",
    data: "{}",
    dataType: "json",
    success: function (msg) {
     var datas = eval(&#39;(&#39; + msg.d + &#39;)&#39;);
     $("#txtIput").autocomplete(datas, {
      formatItem: function (row, i, max) {
       return "<table width=&#39;400px&#39;><tr><td align=&#39;left&#39;>" + row.Key + "</td><td align=&#39;right&#39;><font style=&#39;color: #009933; font-family: 黑体; font-style: italic&#39;>约" + row.Value + "个宝贝</font>  </td></tr></table>";
      },
      formatMatch: function(row, i, max){
       return row.Key;
      }
     });
    }
   });
  });
 </script>
 </head>
 <body>
  <form id="form1" runat="server">
  <p>
  <center>
   <asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox>
  </center>
  </p>
  </form>
 </body>
</html>

実装効果は次のとおりです:

3. オートコンプリートパラメーターの説明

* minChars (数値)
autoComplete をトリガーする前にユーザーが入力する必要がある最小文字数。デフォルト: 1、0 に設定すると、入力をダブルクリックするとリストが表示されます。ボックスまたは入力ボックスのコンテンツを削除します

* width (数値)
ドロップダウンボックスの幅を指定します。デフォルト: ドロップダウンボックスの幅。 input element

* max (Number)
autoComplete ドロップダウンには項目の数が表示されます。デフォルト: 10

* 遅延 (数値)
キーストローク後に autoComplete をアクティブにする遅延時間 (ミリ秒単位)。デフォルト: リモートは 400 ローカル 10

* autoFill (Boolean)
ユーザーが選択したときに、ユーザーの現在のマウス位置の値を入力ボックスに入力します。デフォルト: false

* mustMatch (Boolean)
true に設定すると、autoComplete は一致する結果のみを入力ボックスに表示できるようになります。不正な文字を入力すると、ドロップダウンボックスは使用できなくなります。デフォルト: false

* matchContains ( Boolean)
チェックするかどうかを決定しますba が foo bar の ba と一致するかどうかなど、比較時の文字列内の一致。これは、autofill と併用しないでください。デフォルト: false

。 * selectFirst (Boolean)
true に設定すると、ユーザーがタブまたはリターンキーを入力すると、自動的に選択されていなくても、autoComplete ドロップダウンリストの最初の値が削除されます。もちろん、ユーザーが項目を選択した場合は、ユーザーが選択した値が使用されます。デフォルト: true

* (数値)
キャッシュの長さ。つまり、データベースから取得した結果セットをキャッシュする必要があるレコードの数。デフォルト: 10

* matchSubset (Boolean)
autoComplete はサーバークエリのキャッシュを使用できますか? foo のクエリ結果がキャッシュされている場合、ユーザーが foo を入力すると、取得後、キャッシュを直接使用する必要はありません。このオプションは通常、サーバーの負荷を軽減し、パフォーマンスを向上させるためにオンになります。デフォルト: true

* matchCase (Boolean)
大文字と小文字の区別スイッチがオンになっているかどうかを比較します。前のオプションを理解している場合は、これがより重要です。これは、足を FOO にするかどうかと同じように、理解するのが難しくありません。キャッシュ内で検索します。デフォルト: false

* multiple (Boolean)
複数の値の入力を許可するかどうか、つまり autoComplete を複数回使用して複数の値を入力するかどうか。デフォルト: false

* multipleSeparator (String)
複数選択の場合は、選択した文字を分割します。デフォルト: ","

* スクロール (ブール値)
結果セットがデフォルトの高さより大きい場合にスクロールを使用するかどうか DisplayDefault: true

* scrollHeight (Number)
自动完成提示的卷轴高度用像素大小表示 Default: 180

* formatItem (Function)
为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.

* formatResult (Function)
和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

* formatMatch (Function)
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row

* extraParams (Object)
为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}

* result (handler)
    此事件会在用户选中某一项后触发，参数为：
    event: 事件对象. event.type为result.
    data: 选中的数据行.
    formatted:formatResult函数返回的值
    例如：

 $("#singleBirdRemote").result(function(event, data, formatted) {
  //如选择后给其他控件赋值，触发别的事件等等
 });

以上就是本文的全部内容，希望对大家的学习有所帮助

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。