web-dev-qa-db-ja.com

データリストによる複数選択

タグを使用して検索ボックスの候補のリストを作成していますが、データリストから複数の値を選択できません。現在、私のHTMLは次のとおりです。

<html>

  <form action="search_tags.php" method="GET"/>

  Search: <input type="text" multiple="multiple" name="search" list="tags" autocomplete="off" />

  <datalist id="tags">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
  </datalist>

</html>

1つのアイテムの提案が表示されますが、その後の提案では、2番目のオプションのオートコンプリートは提案されません。 'multiple'タグは私が必要とするすべて（そしてオンラインで提案されているもの）だと思いましたが、それは望ましい効果を持っているようには見えません。

助言がありますか？

htmlhtml-datalist
24
nathan lachenmyer

現在、input type = "email"でのみ機能し、ChromeおよびOperaでのみ機能します。

このミニマリストの例を見てください：

<input type="email" list="emails" multiple>
<datalist id="emails">
    <option value="[email protected]">
    <option value="[email protected]">
    <option value="[email protected]">
    <option value="[email protected]">
</datalist>

<input type="text" list="texts" multiple>
<datalist id="texts">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
</datalist>

（ http://jsfiddle.net/iiic/t66boyea/1/ ）

最初の入力は機能し、2番目は機能しません。カンマを押すだけで、リストは入力へのクリック時と同じように表示されます。

17
iiic

複数の値を受け入れるようにカスタマイズされたデータリスト：

https://jsfiddle.net/bhbwg0rg/1/

各エントリの後に、（コンマ）、次にスペースバーを押します

<label for="authors">Type authors from favorite to least favorite</label>
<input type="text" list="names-list" id="authors" value="" size="50" name="authors" placeholder="Type author names">
<small>You can type how many you want.</small>
<datalist id="names-list">
  <option value="Albert Camus">
  <option value="Alexandre Dumas">
  <option value="C. S. Lewis">
  <option value="Charles Dickens">
  <option value="Dante Alighieri">
</datalist>
2
Neil

私は同じ問題を抱えていて、提案された解決策はそれをカットしないようでした。このPure JS（IE11セーフ）プラグイン nComplete を作成して、複数の値の管理に役立つ対話を作成しました。

1
Ryan

これによる 'multiple'属性は、emailおよびfile入力タイプ。

0
Blue

超シンプルなjQueryツール： Flexdatalist

もっと簡単なものが欲しかったのですが、HTML5開発者はワームの缶を開けたくないので、私が理解しているところの「複数」属性はメールとファイルでしか機能しませんが、 開発者は変更を検討しています 。すべてを検索した後、これを機能させる唯一の方法はalsoこれらのリストにある便利で便利な「#tagHere X」アイテムを取得することでした多くのウェブサイトで。それは全部か無かで、私の同じ問題を解決しました。

残念ながら、Flexdatalistの使用方法に関する完全な説明は見つかりませんでした。だから、私は実用的な例で超完全なウォークスルーを含めています、それが多すぎる場合は許してください...

1. GitHubの Flexdatalist からtwoファイルのみを取得します

  • jquery.flexdatalist.min.js
  • jquery.flexdatalist.css（できる。min。js 代わりに、おそらくCSSを微調整する必要があります）

2.これら2つのファイルを適切な場所に配置します。

私が使用した：

[DOMAIN]/js/jquery.flexdatalist.min.js

[DOMAIN]/css/jquery.flexdatalist.css

3. CSSファイルを含める

どちらか：

  • @import "jquery.flexdatalist.css";ファイル内のstyle.cssファイルはすでに[DOMAIN]/css/にあります

または

  • <link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css">_datalistを含むページの<head>タグの間

4. datalistを含む<input>タグにこれらの属性を含めます

（他の属性とともに）

  • <input...class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple"...>

5. datalistの後にthreeJavaScriptステートメントを含めます

<script src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></script>
<script src=\"js/jquery.flexdatalist.min.js\"></script>
<script>
$('.flexdatalist-json').flexdatalist({
     searchContain: false,
     valueProperty: 'iso2',
     minLength: 1,
     focusFirstResult: true,
     selectionRequired: true,
});
</script>

作業例：

[DOMAIN]/index.html：

<!DOCTYPE html>
<html>
<head>
<title>Flexdatalist Minimalist</title>
<link href="jquery.flexdatalist.css" rel="stylesheet" type="text/css">
</head>
<body>

<input type="text" placeholder="Choose a fruit"

  class="flexdatalist form-control"
  data-min-length="1"
  data-searchContain="true"
  multiple="multiple"

list="fruit" name="my-fruit">
<datalist id="fruit">
  <option value="Apples">Apples</option>
  <option value="Bananas">Bananas</option>
  <option value="Cherries">Cherries</option>
  <option value="Kiwi">Kiwi</option>
  <option value="Pineapple">Pineapple</option>
  <option value="Zucchini">Zucchini</option>
</datalist>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.flexdatalist.min.js"></script>
<script>
$('.flexdatalist-json').flexdatalist({
     searchContain: false,
     valueProperty: 'iso2',
     minLength: 1,
     focusFirstResult: true,
     selectionRequired: true,
});
</script>

</body>
</html>

ここにtwoファイルがあります：

[DOMAIN]/js/jquery.flexdatalist.min.js

[DOMAIN]/css/jquery.flexdatalist.css

優れたドキュメントを備えた代替手段は次のとおりです： Awesomeplete

0
Jesse Steele