12

jqueryダイアログ内で、jqueryUIのjqueryオートコンプリート機能を使用したいと思います。

次に、コントローラー（ASP.NET MVC2を使用しています）で次のようなアクションを準備しました。

public ActionResult GetForos(string startsWith, int pageSize)
{
    // get records from underlying store
    int totalCount = 0;
    string whereClause = "Foro Like '" + startsWith + "%'";
    List<Foro> allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount);

    //transform records in form of Json data
    List<ForoModelWS> foros = new List<ForoModelWS>();
    foreach ( Foro f in allForos)
        foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId), 
            text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name });

    return Json(foros);
}

クラスForoModelWSは、jsonで転送されるデータを保持するためにのみ使用される単純なクラスです。ここにあります

public class ForoModelWS
{
    public string id;
    public string text;
}

クライアント側には、次のjqueryコードがあります。

<input id="theForo" />

<script type="text/javascript">
    $(document).ready(function() {

        $("#theForo").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "post",
                    url: "/Foro/GetForos",
                    dataType: "json",
                    data: {
                        startsWith: request.term,
                        pageSize: 15
                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                label: item.text,
                                value: item.text
                            }
                        }))
                    }
                })
            },
            minLength: 2,
            select: function(event, ui) {
            },
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });

    });
</script>

ただし、提案のあるスライディングウィンドウは表示されません。応答関数内にアラートを入れると、正しいデータを見ることができます。

私は何かが恋しいですか？

助けてくれてありがとう

最初の編集：さらに、返されたリストで選択した要素の「id」プロパティを使用するようにコードを変更するにはどうすればよいですか？

2番目の編集：Chromeデベロッパーツールで詳細を確認しましたが、オートコンプリートを開始するとエラーが表示されることがわかりました。以下：

Uncaught TypeError: Cannot call method 'zIndex' of undefined  @ _assets/js/jquery-ui-1.8.4.custom.min.js:317
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320

オートコンプリートプラグインは、スライディング提案のz-Indexをコンテナの1レベル上に設定しようとしたときに、要素を見つけられないようです。最初のエラーは、jqueryUIダイアログが開いたときに表示されます。オートコンプリートの入力は、jqueryダイアログ内にあるjqueryタブ内にあります

3番目の編集：HTMLマークアップを追加して完成させます

<td width="40%">
   <%= Html.LabelFor(model => model.ForoID)%>
   <br />
   <%= Html.HiddenFor(model => model.ForoID) %>
   <input id="theForo" />
   <%= Html.ValidationMessageFor(model => model.ForoID, "*")%>
</td>
4

5 に答える 5

7

問題が見つかりました。

私の場合、別のプラグイン、this oneも使用していました。

そのプラグインはスクリプトの最後に含まれていたため、質問に記載されているエラーが発生しました。プラグインを削除しましたが、すべて正常に動作します。

それを削除する前に、両方のスクリプトを静的 html に入れて問題を切り分けることも試みました。このようなオートコンプリート機能の最も単純な使用法でさえ、私はそれを経験しました

<script type="text/javascript">
$(document).ready(function() {

    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
    "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
    "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

    $("#theForo").autocomplete({
        source: availableTags
    });
});
</script>

私が得たエラーを引き起こすでしょう。

私の選択は、そのコードがサポートされなくなったとしても、メニュー プラグインを削除することでした。

ありがとう！

于 2010-09-24T18:54:43.993 に答える
5

この議論は本当に古いですが、誰かを助ける場合に備えてここに追加します...ドロップダウンのようにオートコンプリートがまったく機能しない場合は、最初に次のようなハードコードされた提案で最も単純な形式を確認してください下。

$("#txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });

これが機能しない場合は、リンクされた jquery スクリプトの問題です。私の場合、jquery.min.js は古いバージョンの 1.7.1 でしたが、他のすべてのスクリプトは 1.8.18 でした。

正しいバージョンのスクリプトを置き換えるだけで、問題は解決しました。

これが、オートコンプリートを機能させるという基本的な問題につまずいている人に役立つことを願っています。

于 2012-04-06T12:55:00.417 に答える
2

ここで答えたのと同じように、jQueryUIのオートコンプリートの実際の例を見てみましょう。その部分に注意してsourceください。それが役に立てば幸い：

    var cache = {};
    $("#textbox").autocomplete({
      source: function(request, response) {
       if (request.term in cache) {
        response($.map(cache[request.term].d, function(item) {
         return { value: item.value, id: item.id }
        }))
        return;
       }
       $.ajax({
        url: "/Services/AutoCompleteService.asmx/GetEmployees",  /* I use a web service */
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function(data) { return data; },
        success: function(data) {
         cache[request.term] = data;
         response($.map(data.d, function(item) {
          return {
           value: item.value,
           id: item.id
          }
         }))
        },
        error: HandleAjaxError  // custom method
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item);   // custom method
       }
      }
     });

今までにそうしていない場合は、Firebugを入手してください。これは、Web開発にとって非常に貴重なツールです。このJavaScriptにブレークポイントを設定して、何が起こるかを確認できます。

于 2010-09-14T16:53:29.247 に答える
1

fgmenu 関数 menu() の使用 AND オートコンプリート 関数の使用

関数名は同じ問題が発生します

関数名は fgmenu.js で変更できます

  $('#hierarchybreadcrumb6').menuA({content: $('#hierarchybreadcrumb6').next().html(),backLink: false});
于 2012-05-28T08:01:17.803 に答える
0

ロレンツォの回答に基づいて私が修正しました

$.fn.fgmenu = function(options) { ...

に

$.fn.fgmenu = function(options) { ...

このプラグインメニューから、それはうまくいきました（オートコンプリートとメニュープラグインの両方）

于 2011-07-20T16:27:28.523 に答える