2017-12-02 10 views
0

jQuery UIオートコンプリートを使用して、フォームにリモートでテキスト入力を設定しています。私はすべての情報がうまく流れていて、正しく返ってきましたが、入力ポストフィルを検証するのではなく、UIをより良くするためにいくつかのことをしたいと思います。現在、PHPで動的に書かれており、正面から利用されています。そう...jQuery何も返されない場合、文字の自動補完

$js .= "$(function(){"; 
$js .= "$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').autocomplete({"; 
$js .= "source: function(request, response){"; 
$js .= "$.ajax({"; 
$js .= "url: '" . $thisURL . "',"; 
$js .= "dataType: 'jsonp',"; 
$js .= "data: {"; 
$js .= "term: request.term,"; 
$js .= "dependents: '". $thisVAR . "',"; 
$js .= "field: '". $config->settings['field_name'] . "_" . $suggestiveFieldArray . "',"; 
$js .= "fieldSettings: " . json_encode($fieldSettings); 
$js .= "},"; 
$js .= "success: function(data) {"; 
$js .= "response(data);"; 
$js .= "},"; 
$js .= "minLength: 0"; 
$js .= "});"; 
$js .= "}"; 
$js .= "});"; 
$js .= "});"; 

次のようになります。

$(function(){ 
    $('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').autocomplete({ 
     source: function(request, response){ 
      $.ajax({ 
       url: '" . $thisURL . "', 
       dataType: 'jsonp', 
       data: { 
        term: request.term, 
        dependents: '". $thisVAR . "', 
        field: '". $config->settings['field_name'] . "_" . $suggestiveFieldArray . "', 
        fieldSettings: " . json_encode($fieldSettings) 
       }, 
       success: function(data) { 
        response(data); 
       }, 
       minLength: 0"; 
      }); 
     } 
    }); 
}); 

私は、次を返す(ショートで)午前バックエンドで:

array("id" => $row['name'] . '-' . $row['code'], "label" => $row['name'], "value" => $row['name']); 

私がやりたい事はあります入力フィールドのラベルに隠されたエラーメッセージフィールドをトリガし、トリガされたキーを削除して、無効なデータを入力して理由を知らせることはできません。

私が提供している返信データは、すでにバックエンドで検証されています。したがって、提案が提供されていない場合、入力するのに有効なものはありません。

jQuery UI APIのメソッドやイベントでデータを確認するためにさまざまなことを試しましたが、これまでのところ不足しています。

データの情報を確認できるリターン時にコールする方法やコールする方法はありますか?もしそうなら、鍵付きデータを削除するにはどうすればいいですか? @miknik要求あたり

* EDIT *

... 'E' がフィールドに入力され、それらが入手できない場合場所が利用できる対がある

有効データ=(コンソールXHRプレビュー経由)

jQuery213038349144725773976_1512237603485([{id: "Eakly-OK", label: "Eakly", value: "Eakly"}, {id: "Edmond-OK", label: "Edmond", value: "Edmond"},…]); 
0:{id: "Eakly-OK", label: "Eakly", value: "Eakly"} 
1:{id: "Edmond-OK", label: "Edmond", value: "Edmond"} 
2:{id: "El Reno-OK", label: "El Reno", value: "El Reno"} 
3:{id: "Elk City-OK", label: "Elk City", value: "Elk City"} 
4:{id: "Enid-OK", label: "Enid", value: "Enid"} 
5:{id: "Eufaula-OK", label: "Eufaula", value: "Eufaula"} 

無効なデータ:

jQuery2130021538268901126534_1512237746135([]); 
No properties 
+0

有効なデータと無効なデータの例を挙げてください。 – miknik

+0

ああ、私はそれを得ると思います。オートコンプリートで結果が返されない場合は、エラーをスローして入力フィールドをリセットしますか? – miknik

+0

はい...あまりあまりフィールドをリセットしません。入力された最後の文字を削除するだけです(無効なオプションが返されました)。 –

答えて

0

あなたのテキストボックスへの最後の入力を保持するために、グローバル変数を定義して、私はgoodTextそれを呼ぶことにします。

keydownイベントハンドラをテキストボックスにバインドして、変数の値を設定するか、ajax呼び出しの成功関数の一部として設定します。

データ応答をチェックするために、その空の場合は応答の数に基づいてのif/else条件が

if (!data || !Object.keys(data).length) 

を返され、その後、あなたが好きなエラーメッセージを表示するためのコードを挿入し、しているあなたの成功の機能を変更しますその最後の良好な値にあなたのテキストボックスの値を戻す:エルス

$('#textInput').val(goodText); 

、彼らは良い反応を得るときあなたは何でも、あなたはそのように更新したい場合は、ここでgoodTextを設定するためのコードを追加します。

2文字を入力するまでオートコンプリートを遅らせたい場合があります

+0

私はそれを複雑にする方法があった...笑 ありがとう。 –

関連する問題