可變長度列表中的jquery自動完成

試圖弄清楚如何做到這一點，使用Sanderson begincollectionitems方法，並希望在每行中使用自動完成和字段。可變長度列表中的jquery自動完成

我想我看到如何添加一個自動完成的行，只是不確定現有的行與呈現的方法。

每行都有一個字段，用戶可以選擇指向另一個表中的記錄。每個自動完成都需要在html元素idfield_guid上工作。

我在想像如何使用jquery枚舉元素並將自動完成添加到每個目標是該行的唯一字段。另一個想法是一個正則表達式，它可以讓你枚舉這些字段併爲循環中的每個字段添加自動完成，其中自動處理唯一字段ID。

這聽起來合理嗎？或者您能建議正確的方法嗎？另外，頁面上有多少個自動完成功能還有一個合理的限制？感謝您的任何建議！

編輯，這是我的幫助後有什麼。 data-jsonurl顯然沒有被jquery拾起，因爲它正在對主頁的url進行html請求。

$(document).ready(function() { 
     var options = { 
      source: function(request, response) { 
       $.getJSON($(this).data("jsonurl"), request, function (return_data) { 
        response(return_data.itemList); 
       }); 
      }, 
      minLength: 2 
     }; 

     $('.ac').autocomplete(options); 
    }); 

    <%= Html.TextBoxFor(
    x => x.AssetId, 
    new { 
     @class = "ac", 
     data_jsonurl = Url.Action("AssetSerialSearch", "WoTran", new { q = Model.AssetId }) 
    }) 
%>

和發射的HTML看行不行對我說：

<input class="ac" data-jsonurl="/WoTran/AssetSerialSearch?q=2657" id="WoTransViewModel_f32dedbb-c75d-4029-a49b-253845df8541__AssetId" name="WoTransViewModel[f32dedbb-c75d-4029-a49b-253845df8541].AssetId" type="text" value="2657" />

控制器是不是一個因素呢，在螢火蟲我收到這樣的請求：

http://localhost:58182/WoReceipt/Details/undefined?term=266&_=1312892089948

有什麼事正在發生的是$（this）不是返回html元素，而是jQuery自動填充小部件對象。如果我鑽入'元素'下的螢火蟲屬性，我最終會看到data-jsonurl，但它不是$（this）的屬性。這裏是console.log（$ this）： enter image description here

來源

2011-08-06 Vince Bray

你可以使用jQuery UI Autocomplete插件。簡單地套用一些知道類需要自動完成功能，以及額外的HTML5 data-url屬性表明外鍵的所有領域：

<%= Html.TextBoxFor(
    x => x.Name, 
    new { 
     @class = "ac", 
     data_url = Url.Action("autocomplete", new { fk = Model.FK }) 
    }) 
%>

，然後安裝插件：

var options = { 
    source: function(request, response) { 
     $.getJSON($(this).data('url'), request, function(return_data) { 
      response(return_data.suggestions); 
     }); 
    }, 
    minLength: 2 
}); 

$('.ac').autocomplete(options);

最後我們可能有一個控制器操作需要兩個參數（term和fk），它將返回給定術語和外鍵的JSON數組建議。

public ActionResult AutoComplete(string term, string fk) 
{ 
    // TODO: based on the search term and the foreign key generate an array of suggestions 
    var suggestions = new[] 
    { 
     new { label = "suggestion 1", value = "suggestion 1" }, 
     new { label = "suggestion 2", value = "suggestion 2" }, 
     new { label = "suggestion 3", value = "suggestion 3" }, 
    }; 
    return Json(suggestions, JsonRequestBehavior.AllowGet); 
}

您還應該爲新添加的行附加自動完成插件。

來源

2011-08-07 05:04:22

謝謝！我不知道數據 - 這非常聰明！ $（this）.data（「jsonurl」）由於某種原因沒有返回正確的url。我得到的頁面地址是undefined（http：// localhost：58182/WoReceipt/Details/undefined？term = 266＆_ = 1312892089948）。我會盡可能地發佈代碼，但不瞭解它。如果我硬編碼它的作品的網址... –

可變長度列表中的jquery自動完成

回答

相關問題