🎒 😣 📖 HTML5スタイルのGoogleサジェスト 🙏🏽 🛅 🐑

はじめに

HTML5はHTML（およびXHTML）の次の大きな変更であり、 WHATWGおよびW3C HTML WGグループによって共同で開発されています（作業はまだ完了していませんが、この記事では単にHTML5と呼びます）。前の記事でHTMLフォームの始まりとHTML5を使用した改善の可能性について既に説明したので、HTML5入力フィールドのより複雑な側面を見て、短いサーバースクリプトと数行のマークアップを使用して、オートコンプリート入力フィールドの作成が簡単であることを示す例で締めくくります。

この記事で説明するツールは、 HTML 5ドラフトに統合されるWeb Forms 2仕様の一部です。（実際の例を見るには、最新バージョンのOpera（できれば9.5 ）を使用する必要があります。残念ながら、テクノロジーの最前線では、ブラウザについて予約する必要があります。）

コンボボックス（入力リスト）

最初に、コンボボックスでHTML5がどのように機能するかを見てみましょう。

<input list="languages" name="language"> 
      

        
        
        
      

     <datalist id="languages"> 
      

        
        
        
      

     <option value="Norwegian"></option> 
      

        
        
        
      

     <option value="Dutch"></option> 
      

        
        
        
      

     <option value="English"></option> 
      

        
        
        
      

     </datalist>

古いブラウザでは、このマークアップは単純なテキスト入力フィールドになります。 HTML5をサポートする新しいエージェントでは、（任意のテキストを入力する機能に加えて）定義済みの値の1つを選択できます。この機能は、たとえば、電子メールクライアントやブラウザのアドレスバーが提供する機能に非常に似ています。正確にこれが必要であるが、古いブラウザのオプションで通常のドロップダウンリスト（選択）も表示したい場合は、このマークアップ（例に追加されたコンテキスト）を使用できます。

<label> 
      

        
        
        
      

     Enter your front-end specialty: 
      

        
        
        
      

     <input list="languages" name="language"> 
      

        
        
        
      

     </label> 
      

        
        
        
      

     <datalist id="languages"> 
      

        
        
        
      

     <label> 
      

        
        
        
      

     or select one from the list: 
      

        
        
        
      

     <select name="language"> 
      

        
        
        
      

     <option value="">(none)</option> 
      

        
        
        
      

     <option>HTML</option> 
      

        
        
        
      

     <option>CSS</option> 
      

        
        
        
      

     <option>JavaScript</option> 
      

        
        
        
      

     </select> 
      

        
        
        
      

     </label> 
      

        
        
        
      

     </datalist>

list属性とHTML5 datalist要素をサポートするブラウザーは、datalist要素とそのすべてのコンテンツを表示しません。代わりに、オプション要素の内容を使用してコンボボックスを埋めます。古いブラウザはdatalist要素の内容を表示し、ユーザーがテキストフィールドまたはドロップダウンリストを使用できるようにします。

データリストの外部ソース

もう1つの興味深い機能は、外部のXMLファイルからツールチップを取得できることです。メディアタイプapplication / xmlで指定し、次のようにします。

<select xmlns="http://www.w3.org/1999/xhtml"> 
      

        
        
        
      

     <option value="1"/> 
      

        
        
        
      

     <option value="2"/> 
      

        
        
        
      

     <option value="..."/> 
      

        
        
        
      

     </select>

このselect要素の内容は、select属性に増分値がない限り、ファイルを参照するdatalist要素の内容を置き換えます。その内容は既存のオプションを置き換えず、それらを補完します。次のように外部fooファイルを添付できます。

<input list="languages" name="language"> 
      

        
        
        
      

     <datalist id="languages" data="foo"></datalist>

（ところで、HTML5のselect要素にはデータ属性もあります。）

記事のソースコード全体のアーカイブ。作業コードの例。

ダイナミックコンボボックス

コンボボックスと、外部ファイルを使用して入力する方法を検討しました。 HTML5でGoogle Suggestをエミュレートする前に残っているのは、コンボボックス内のイベントを待機し、小さなサーバー側スクリプトを使用して、datalist要素のデータソースとなるファイルを動的に作成することです。通常の方法でこれを行うには、オプションのリストを持つ独自の「ドロップダウンメニュー」を作成し、XMLHttpRequestを使用して外部データを取得し、これらのデータでメニューを埋めるコードを作成する必要があります。

では、どのイベントを使用できますか？ Web Forms 2では、新しい入力イベントが導入されました。これは、Operaを含むいくつかのブラウザーで既にサポートされています。このイベントは、ユーザーがキーボードからテキストを入力した後に発生します。多くの文字をすばやく印刷する場合、1つのイベントのみが発生します。ハンドラーをコンボボックスに接続すると、コードが少し複雑になります。

<input list = "suggest" name = "q"

oninput = "list.data = '？w =' + encodeURIComponent（値）">

<datalist id = "suggest"> </ datalist>

入力イベントハンドラーがlist.dataを変更することは簡単にわかります。入力フィールドのリスト属性は、idでデータリスト要素を参照するため、データはこのデータリストから取得されます。目的のアドレスからデータをダウンロードするために私たちがやるべきことは、データ属性を変更することだけです。新しいアドレスは文字列ですか？Wとユーザーが入力した文字列で、encodeURIComponentグローバル関数を使用してURIで使用するためにエンコードします。したがって、ユーザーがfooを入力すると、リクエストはW = fooに送信されます（このURIは、スクリプトが実行されているページに関連して機能します）。サーバースクリプトはこのURIを受信し、入力された文字列の可能なオプションを含むテキストファイルを見つけて、これらのオプションを含むXMLファイルを返し、コンボボックスに入力します。これはすべて動的に行われるため、テキストフィールドの検索テキストを変更するとすぐに、サーバースクリプトは新しいデータを処理し、新しいXMLファイルを送信して、datalist要素の内容を変更します。

自分で試せるように、この実用的な例を作成しました。ファイルをアップロードするか、実際の完成した例を確認してください。

この例のファイル：

suggest.txtファイル内の改行で区切られたヒントのリスト-適切なオプションを探してサーバースクリプトによって読み取られます。
Pythonスクリプトarticle-example-suggest.pyは、ユーザーがテキストファイルに入力した文字列を検索し、検索結果とともにXMLを返します。このファイルには、上記で説明したinput要素とdatalist要素も記述されています。

完全なpythonコードは次のようになります。

import os 
      

        
        
        
      

     qs = os.environ["QUERY_STRING"] 
      

        
        
        
      

     
      

        
        
        
      

     # The page as shown by default 
      

        
        
        
      

     main="""Content-Type:texthtml;charset=UTF-8\n 
      

        
        
        
      

     <!doctype html> 
      

        
        
        
      

     <html> 
      

        
        
        
      

     <head><title>Demo</title></head> 
      

        
        
        
      

     <body> 
      

        
        
        
      

     <p> 
      

        
        
        
      

     <label> 
      

        
        
        
      

     Please enter a word: 
      

        
        
        
      

     <input list="suggest" name="q" 
      

        
        
        
      

     oninput="list.data = '?w=' + encodeURIComponent(value)"> 
      

        
        
        
      

     </label> 
      

        
        
        
      

     <datalist id="suggest"></datalist> 
      

        
        
        
      

     </p> 
      

        
        
        
      

     </body> 
      

        
        
        
      

     </html>""" 
      

        
        
        
      

     
      

        
        
        
      

     if qs=="": 
      

        
        
        
      

     print main 
      

        
        
        
      

     else: 
      

        
        
        
      

     # If a query string was provided we need to provide an XML file with 
      

        
        
        
      

     # options filtered using the user input 
      

        
        
        
      

     import sys 
      

        
        
        
      

     print "Content-type: application/xml" 
      

        
        
        
      

     print "Cache-control: no-cache" 
      

        
        
        
      

     print "" 
      

        
        
        
      

     sys.stdout.write('<select xmlns="http://www.w3.org/1999/xhtml">') 
      

        
        
        
      

     sys.stdout.write(' <option>[searching for "%s"]</option>' % qs[2:]) 
      

        
        
        
      

     for name in open('suggest.txt').readlines(): 
      

        
        
        
      

     if name.lower().find(qs[2:].lower())!=-1: 
      

        
        
        
      

     sys.stdout.write('<option>%s</option>' % name) 
      

        
        
        
      

     sys.stdout.write('</select>')

まとめ

これらの例をお楽しみください！（GoogleサジェストをエミュレートするHTML5を使用することはほんの数行であるとプレゼンテーションで示唆した後、このPythonスクリプトを作成したJohannes Hoff（Operaのコア開発者）に感謝します。クライアント。）これはまだ本格的に使用する準備ができていませんが、HTML5で得られるものを感じることができます。

HTML5スタイルのGoogleサジェスト

はじめに

コンボボックス（入力リスト）

データリストの外部ソース

ダイナミックコンボボックス

まとめ

More articles: