私の問題：入力した候補を自動的に入力する入力ボックスを作りたいと思っています。最初の選択を入力すると、これはすでに入力されていますプラグイン）をクリックするか、またはEnterキーを押して、そのURLにリダイレクトするURLに結び付けられたその選択肢を送信したいと思います。URLに行くためのJavascript/Jquery <input>と<datalist>

プラグイン

の基本的な例このここでは、開発者のウェブサイトおよび使用されるものの例から直接です。

<input class="form-control awesomplete" list="mylist" /> 
 
<datalist id="mylist"> 
 
\t <option>Ada</option> 
 
\t <option>Java</option> 
 
\t <option>JavaScript</option> 
 
\t <option>Brainfuck</option> 
 
\t <option>LOLCODE</option> 
 
\t <option>Node.js</option> 
 
\t <option>Ruby on Rails</option> 
 
</datalist>

基本的な変更米国状態のリストをナビゲートするためにされたため、私はそれを使用することになり何

。ここでの考え方は、新しい（または現在のウィンドウ）を状態に関連付けられたURLにリダイレクトすることです。アラバマはhttp://www.alabama.govに行くなど。

<input class="form-control awesomplete" list="states" /> 
 
<datalist id="states"> 
 
\t <option>Alabama</option> 
 
\t <option>Alaska</option> 
 
\t <option>Arizona</option> 
 
\t <option>Arkansas</option> 
 
\t <option>California</option> 
 
\t <option>Colorado</option> 
 
\t <option>Connecticut</option> 
 
</datalist>

I stuck here:

多くの検索を経由するとjQueryやJavaScriptが、このために必要であることを見た後、私はいくつかの解決策を通過しようとしたが、非常にそれを動作させるように見えることはできません。それは可能ではないかもしれません。私は試したことの例をあまりにも投げたくないし、投稿を乱雑にしたくないので、私はその考えをもって最も基本的な形にしておきたいと思った。

私が知る限り、オプションタグ付きの値にURLを結びつける必要がありますか？私のコードでこれの例がありますが、もう一度、私はこれを最も基本的な形式のビューアに残そうとしました。

出典

2017-09-12 H. Klamp

は、あなただけの[値]を追加する方法を求めています'option'要素ですか？このようなものではないでしょうか？： ''おそらくdata- *属性ですか？例： ''あなたがどこにいらっしゃるのかは本当にわかりません。 – David

こんにちはDavid、明快さの欠如のために申し訳ありません。私は値の追加を理解していますが、そこにあるURLにリダイレクトするためにその値を使用するスクリプトを取得する必要があります。他の誰かがこの回答/提案を提供しているように見えますが、現在私はそれを動かそうとしています。基本的に、

：

var aweInput = new Awesomplete(myinput); 
 
myinput.addEventListener('awesomplete-select', function(e) { 
 
    var url = e.text.value; // The value associated with the selection 
 
    console.log('navigating to: ' + url) 
 
    // Some optional actions: 
 
    e.preventDefault(); // Prevent the URL from appearing in the input box 
 
    e.target.value = e.text.label; // Set the value to the selected label 
 
    aweInput.close(); // close the drop-down 
 
    //window.location.href = url; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.css" /> 
 
<input id="myinput" list="states" /> 
 
<datalist id="states"> 
 
\t <option value="http://www.alabama.gov/">Alabama</option> 
 
\t <option value="http://alaska.gov/">Alaska</option> 
 
\t <option value="https://az.gov/">Arizona</option> 
 
\t <option value="http://www.arkansas.gov/">Arkansas</option> 
 
\t <option value="http://www.ca.gov/">California</option> 
 
\t <option value="https://www.colorado.gov/">Colorado</option> 
 
\t <option value="http://portal.ct.gov/">Connecticut</option> 
 
</datalist>

出典

2017-09-12 14:31:57 trincot

こんにちはTrincot。はい、これは何ですか奇妙なことに、私がコードを借りると、リダイレクトを起動することができないようです。私は、// window.location.href = url;コードですが、コードスニペットで動作しているようですが、ホストされた環境で実行すると起動しないようですが、これを続けるつもりです。 URLはボックスに入力されず、タグの間に通常のタイトルを保持しますか？ありがとうございました –

確かに 'window.location.href'は[標準的な方法]です（https://stackoverflow.com/質問/ 1226714/javascriptへのブラウザへのナビゲート方法）をリダイレクトしても問題が解決しない場合は、他の何らかの形でこの操作に反するコード。（2）URLがテキストボックスに入らないようにコードを更新しました。 – trincot

私はこれに適切なドキュメントのロードまたはウィンドウのロード機能を与えていない可能性はありますか？私は '

あなたはすでにほとんどの仕事をしているようですが、リダイレクトを行うには小さなjavascript/jquery関数を書く必要があります。例えば

（blureイベントで）：AwesompleteためのAPIの中で

var placeHolder = '[countryCode]'; 
 
var urlTemplate = 'https://www.' + placeHolder + '.gov'; 
 
$('.awesomplete').on('blur', function(e){ 
 
    var value = e.target.value; 
 
    var nextUrl = urlTemplate.replace(placeHolder,value); 
 
    console.log('redirecting to - ' + nextUrl); 
 
    //window.location.href = nextUrl; // uncomment for redirecting 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="form-control awesomplete" list="states" /> 
 
<datalist id="states"> 
 
\t <option>Alabama</option> 
 
\t <option>Alaska</option> 
 
\t <option>Arizona</option> 
 
\t <option>Arkansas</option> 
 
\t <option>California</option> 
 
\t <option>Colorado</option> 
 
\t <option>Connecticut</option> 
 
</datalist>

出典

2017-09-12 12:56:24

、あなたはイベントのリストを見つけることができます。イベントの1回、awesomplete-selectcompleteは、ユーザーがオプションを選択したときにイベントを発生させます。これは、あなたがフックしたいものです。

あなたは方法window.location.hrefにユーザーをリダイレクトすることをお勧めします。

var input = document.getElementById('myinput'); 
 

 
new Awesomplete(input); 
 
input.addEventListener('awesomplete-selectcomplete', (e) => { 
 
    // This callback will be called whenever a selection is made. 
 
    console.log(e.text.label) // Grabs the text of the selection 
 
    console.log('navigating to: ' + "www." + e.text.label + ".gov") 
 
    //window.location.href = "www." + e.text.label + ".gov"; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.js"></script> 
 
<input id="myinput" list="states" /> 
 
<datalist id="states"> 
 
\t <option>Alabama</option> 
 
\t <option>Alaska</option> 
 
\t <option>Arizona</option> 
 
\t <option>Arkansas</option> 
 
\t <option>California</option> 
 
\t <option>Colorado</option> 
 
\t <option>Connecticut</option> 
 
</datalist>

あなたが見ることができるように、私は政府のウェブサイトのいずれかのURLを知らないが、あなたが必要としてあなたがURLを構築することができます

は、以下のコードを参照してください。に。

あなたが valueプロパティでURLを保存して、入力が行われたときのことを読み出すことができ

出典

2017-09-12 13:01:09

私はもう一度遅れています:(ここでそれを発見しました）https://github.com/LeaVerou/awesomplete/blob/gh-pages/awesomplete.min.js – Niladri

URLに行くためのJavascript/Jquery <input>と<datalist>

プラグイン

基本的な変更米国状態のリストをナビゲートするためにされたため、私はそれを使用することになり何

答えて

関連する問題