2017-12-02 223 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請求......

當「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調用的成功函數的一部分。

修改你的成功的功能來檢查數據的反應,並有如果基於響應數/ else條件返回

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

如果其空,插入代碼,以顯示你想要的任何錯誤信息,然後您的文本框的值恢復到去年良好的價值:

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

否則,這樣做時,他們得到了良好的反響不管你做什麼,添加代碼,如果您想更新這種方式來設置goodText這裏。

你可能會希望延遲自動完成,直到他們已經進入了幾個字符

+0

我一直在複雜的方式...大聲笑 謝謝。 –

相關問題