2013-03-30 26 views
0

的結果我可以使用下面的代碼,以允許用戶只填寫表單時選擇的自動完成選項之一,完美的作品:如何「名」的Ajax調用

var validOptions = ["Bold", "Normal", "Default", "100", "200"] 
previousValue = ""; 

$('#ac').autocomplete({ 
    autoFocus: true, 
    source: validOptions 
}).keyup(function() { 
    var isValid = false; 
    for (i in validOptions) { 
     if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) { 
      isValid = true; 
     } 
    } 
    if (!isValid) { 
     this.value = previousValue 
    } else { 
     previousValue = this.value; 
    } 
}); 

然而,我使用ajax來創建陣列,如下所示,所以我沒有名稱陣列eg如上所述的validOptions

問題如何使用上述「辦法」與下面的方法

$('#ac').autocomplete({ 
    autoFocus: true, 
    source: "/pages/includes/getAgent.php", 
    select: function(event, ui) { 
     $('#autoc1').val(ui.item.agent_name); 
     $('#comm').val(ui.item.commission_percent); 
     return false; 
    } 
    }).keyup(function() { 
     var isValid = false; 

     // here is the issue, the new data is not called validOptions 
     for (i in validOptions) { 
     if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) { 

      isValid = true; 
     } 
    } 
     if (!isValid) { 
      this.value = previousValue 
     } else { 
      previousValue = this.value; 
     } 
    }).data("ui-autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<a>" + item.agent_name + "</a>") 
     .appendTo(ul) 
    }; 
+0

其中* *存儲的數據呢?爲什麼不能使用'validOptions'來存儲數據? – JJJ

+0

@Juhana數據存儲在一個Mysql表中,並使用自動完成功能 –

回答

1

您將無法使用keyup事件。相反,您需要設置source才能運行並創建您自己的AJAX請求。內的有效性,或具有不同特性的識別結果的數設置服務器側返回JSON返回的結果的該請求的測試長度的回調和結果本身

Remote Data with cache Demo見源代碼作爲例如用於source函數創建自己的AJAX

您可能希望設置錯誤指示符和/或調整您的自定義_renderItem方法以顯示No results,而不是更改輸入的值,這是用戶意外的行爲。這將允許用戶查看輸入的內容以防萬一是一個錯字。

另一種方式來顯示no results是AJAX回調中操縱數據,如果沒有返回的值