web-dev-qa-db-ja.com

オートコンプリートは「機能ではありません」

Jquery UI（jquery-ui-1.8.10.custom.min.js）のオートコンプリート機能を、機能するシンプルなHTMLページでテストしました。

次に、同じコードをAsp.Netユーザーコントロールにコピーすると、機能しなくなります。 JavaScriptエラーは「$ searchBox.autocomplete is not a function」です。

このユーザーコントロールは、Asp.net Sitefinity 3.7プロジェクトで使用されています。このページにはScriptManagerがあります。他に何を追加できるかわからない...

誰かが何が起こっているのか知っていますか？

補う：

<script src="/js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";

        $('input#searchInput').autocomplete({
            source: ['johannesburg z', 'johannesburg x', 'johannesburg v', 'johannesburg b', 'johannesburg a', 'johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p'],
            minLength: 3,
            open: function (e, ui) {

                var 
                acData = $(this).data('autocomplete'),
                styledTerm = termTemplate.replace('%s', acData.term);

                acData
                .menu
                .element
                .find('a')
                .each(function () {
                    var me = $(this);
                    me.html(me.text().replace(acData.term, styledTerm));
                });

            }
        });
    });
</script>
<div class="outerSearchBox">
    <div class="searchFieldWrapper">
        <input id="searchInput" type="text" class="searchField" /><a class="searchButton">SEARCH
        </a>
        <div class="searchSugContainer">

ありがとう。

javascriptjqueryasp.netjquery-uisitefinity
14
Jacques

そのエラーは通常、jqueryまたはプラグインがまだロードされていないことを意味します。ドキュメントが読み込まれる前に、関数呼び出しがヒットしていないことを確認します。

$(function(){
    var $searchBox = $('#mysearchBox');
    $searchBox.autocomplete(...);
});

また、JavaScriptファイルへのパスが正しいことも確認してください。 Firebug またはgoogle chrome開発者ツールは、これらの問題の両方をチェックするのに役立ちます。

13
Phil

かもしれない：

  1. Jquery.jsが読み込まれる順序。
  2. 重複するjquery.jsが同じページに含まれています。
9
Ramnath

テストに jQuery.noConflict（）メソッド を使用してみてください。基本的には、jQueryに別のエイリアスを使用させるだけです。これは私にとってSF4.3で機能しました。

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
3
Patrik Affentranger

この問題が発生し、jQueryファイルが2回ロードされていました。ほとんどこれは私の頭の中にありました：

<script src="assets/js/jquery.min.js"></script>
<script src="js_css/jquery-ui.min.js" ></script>

そして、私はAJAX呼び出しを行って、ドキュメントのより多くの部分をロードしましたが、別の呼び出しがありました：

<script src="assets/js/jquery.min.js"></script>

私のAJAX=結果のスクリプトタグで、結果をドキュメントに$ .hmtl（）しました。これにより、jquery-ui.min.jsが変更したすべての変数または利用した。

2
Jermel

これは、Sitefinity自身のjQueryの使用との競合が原因です。

JQueryのスクリプト参照をページの下部のform終了タグの前に移動した場合。これでSitefinity 4.0の問題は解決しますが、Sitefinity 3.7でもこの問題は解決されると思います。

1
Al Harding