1

テキスト ボックスに jQuery オートコンプリートを実装していますが、コードが正しく表示されるかどうか知りたいです。

これが私のビューからの私のテキストボックスです。

<div class="editor-field">
  @Html.TextBoxFor(model => model.Customer.CustomerName,  
                                      new {id = "CustByName" })
</div>

テキストボックス ID のオートコンプリートを実装する JavaScript を次に示します。

$(document).ready(function () {
$("#CustByName").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Cases/FindByName", type: "GET", dataType: "json",
            data: { searchText: request.term, maxResults: 10 },
            success: function (data) {
                response($.map(data, function (item) {
                    return { 
                       label: item.CustomerName, 
                       value: item.CustomerName, 
                       id: item.CustomerID }
                }))
            }
        })
    }
});

});

以下は、JavaScript によって呼び出されるコントローラー アクションです。

public JsonResult FindByName(string searchText, int maxResults)
{
   CustomerFind find = new CustomerFind();
   var result = find.FindCustomerByName(searchText, maxResults);
   return Json(result);
}

FindCustomerByName と呼ばれる CustomerFind の関数を次に示します。

internal List<Models.Customer>  
               FindCustomerByName(string searchText, int maxResults)
{
        List<Models.Customer> cust = new List<Customer>();
        var result = from c in cust
                    where c.CustomerName.Contains(searchText)
                    orderby c.CustomerName 
                    select c;
        return result.Take(maxResults).ToList();
}

これは、スクリプト参照用のレイアウトcshtmlファイルにあるものです。

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/rls-functions.js")" type="text/javascript"></script>"

FindCustomerByNameの LINQ クエリが存在するにもかかわらずレコードを返さないことを除いて、すべてが正常に機能しているようです。

問題の可能性があることを提案したり、オートコンプリートを行うためのより良い方法を提案したりできますか?

私は数多くの例を見て、これをまとめました。

4

2 に答える 2

1

二度目の更新。いくつかの構文エラーが見つかりました

$(document).ready(function () {
    $("#CustByName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Cases/FindByName", type: "GET", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { 
                           label: item.CustomerName, 
                           value: item.CustomerName, 
                           id: item.CustomerID }
                    })); // <--- semicolon here
                }
            }); // <--- semicolon here
        },
        minLength: 3 // <-- sets the minimum number of characters to type before ajax fires
    });
});

OPがデータを取得しているdbコンテキストを持っていないことに基づいて更新します

以下は、EF を使用してデータベースへのクエリを作成する例です。最初にデータベース コンテキストを作成する必要があります。次に、そのコンテキストをコードで使用します。

public IList<Lender> GetLenders(string partialText) {
    IList<Lender> lenders;

    // Create data connection to the LINQ to SQL class that represents the database
    using (DBDataContext dataContext = new DBDataContext()) {

        // Get all lenders where lender name contains partial text and put them into new Lender objects
        // The final call .ToList() puts all the Lender objects into a collection that can be enumerated
        lenders = (from data
                        in dataContext.LenderDBs
                    orderby data.LenderName
                    where data.IsActive == true
                        && data.LenderName.ToLower().Contains(partialText.ToLower())
                    select new Lender {
                        LenderName = data.LenderName,
                        URL = data.URL
                    }).Take(15).ToList();
    }
    return lenders;
}

TextBoxForオートコンプリート機能を作成するクラスがありませんclass="ui-widget"が、ドロップダウンのスタイリングのためにレイアウトにこのスクリプトがあることも確認してください

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

@Html.TextBoxFor(model => model.Customer.CustomerName,  
                                  new {id = "CustByName", @class = "ui-widget" })

そして、あなたのアクションは、リターンで Get を許可することにより、Json リターンを許可する必要があります

public JsonResult FindByName(string searchText, int maxResults)
{
   CustomerFind find = new CustomerFind();
   var result = find.FindCustomerByName(searchText, maxResults);
   return Json(result, JsonRequestBehavior.AllowGet);
}

それ以外contentType: "application/json; charset=utf-8"に、あなたのajaxリクエストに欠けているものは他にありません。セクション内のステートメントのalert(data);直前に挿入してみてください。それがヒットしない場合、Ajax はエラーになっていますresponsesuccess

また、別の懸念として、maxResultsデータを返すために送信していますが、データは実際にはsearchText一致するすべての行を返し、クライアントに到達するとmaxResults. それを変更してmaxResults、必要以上のデータを返さないようにクエリの一部にしました。実際にはmaxResults、構成可能なオプションとして web.config ファイルに入れます。UI は、そのようなルールに関与する必要はありません。

あなたのオリジナルのようなコードと以下のようなコードを使用してプロファイリングしました。SQL Server の実行を監視すると、サーバーは上記のコードと一致するすべての行を返します。ただし、以下のコードは、Top 1010 行のみが返されるように句を作成します。

internal List<Models.Customer>  FindCustomerByName(string searchText, int maxResults)
{
        List<Models.Customer> cust = new List<Customer>();
        var result = (from c in cust
                    where c.CustomerName.Contains(searchText)
                    orderby c.CustomerName 
                    select c).Take(maxResults).ToList();
        return result;
}
于 2012-06-02T19:53:27.590 に答える
1

空のリストから結果を取得しています:

List<Models.Customer> cust = new List<Customer>();

おそらく次のようなものが必要です。

List<Models.Customer> cust = .......  <- call your db code here.
于 2012-06-02T20:38:27.340 に答える