2011-07-29 80 views
2

我已經有了我需要的功能,幾乎可以完成,並且正在尋找一些幫助。我有一個VendorID屬性的模型。我有一個使用這個模型的強類型視圖。我允許用戶從使用自動完成的輸入文本框中選擇供應商。jquery自動完成MVC3

我使用這種剃鬚刀語法將模型的VendorID屬性綁定到視圖上的隱藏字段。

@Html.HiddenFor(m => m.VendorID) 

當幾個字符的用戶類型的文本框,選擇一個項目,jQuery函數我有設置隱藏字段的值。到目前爲止,一切都很好。我遇到的問題是,如果用戶完全清除文本框或輸入無效文本,而沒有選擇有效的值,並且我的隱藏字段無法更新。

這是我迄今爲止的jquery。

$(document).ready(function() { 
    $('#vendorautocomplete').val($('#VendorName').val()); //prepopulate our vendorautocomplete textbox from our model 
}); 

$(function() { 

    $('#vendorautocomplete').autocomplete({ 

     source: function (request, response) { 
      $.ajax({ 
       url: "/test/vendors", type: "POST", dataType: "json", //Url to our action supplying a list of vendors 
       data: { searchString: request.term, maxRecords: 10 }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { label: item.VendorName, value: item.VendorName, id: item.VendorID }; 
        })); 
       } 
      }); 
     }, 
     select: function (event, ui) { 
      $('#VendorID').val(ui.item ? ui.item.id : 0); //Set our VendorID hidden for model binding 
     } 

    }); 
}); 

我希望我可以做一些類似的選擇自動完成功能:以上僅爲模糊:,但沒有奏效。我想我可以使用blur事件根據文本框中的值查找供應商的ID,但似乎在某些時候我應該能夠檢測到無效的供應商名稱並將隱藏字段設置爲0,我只是不知道在哪裏。

回答

1

我設法通過將以下內容添加到我的腳本中來完成我想要的操作。

壞搜索數據(沒有返回的值)

success: function (data) { 
        var arr = $.map(data, function (item) { return { label: item.VendorName, value: item.VendorName, id: item.VendorID }; }); 
        if (arr.length == 0) { 
         $('#VendorID').val(null); 
         $('#VendorName').val(''); 
        } 
        response(arr); 
       } 

我查了空白文本框的更改事件

$(function() { 
     $('#vendorautocomplete').change(function() { 
      if ($('#vendorautocomplete').val() == null || $('#vendorautocomplete').val() === "") { 
       $('#VendorID').val(null); 
       $('#VendorName').val(''); 
      } 
     }); 
    }); 

不知道這是最好的solutuion,但它的工作原理和我需要轉移到其他問題上。