web-dev-qa-db-ja.com

.autocompleteは関数エラーではありません

以下は私のマイコードです

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

そして私のHTMLコードは

<div class="ui-widget">
<input name="searcharea" class="selectarea" id="searcharea" type="text" value="" placeholder="Area">
</div>

そして私の機能は

<script>
$(function(){
    $( "#searcharea" ).autocomplete({
        source: "suggestions.php"
    });
    $( "#searchcat" ).autocomplete({
        source: "suggestions1.php"
    });
});
</script>

このページをウェブサイトの検索コードを含む別のファイルに含め、さまざまなページに埋め込みました。私のインデックスページでは、ソースファイルの値を提案していますが、他のページではオンラインでtyperrorを与えています。

$( "#searcharea" ).autocomplete({

私のウェブサイトのリンクは： http://www.jodhpuryp.in/

これは私の自動提案ボックスのソースです http://api.jqueryui.com/autocomplete/

インデックスページでの作業中にWebサイトの他のページでこのエラーが発生する理由を教えてください。

jqueryhtmlautocompleteautosuggest
29
user2454340

問題が見つかりました。GoogleTranslatorに別のjqueryファイルを含めていましたが、それらは互いに競合しており、オートコンプリート機能をロードできませんでした。

39
user2454340

オートコンプリートのようなサウンドは、それを定義するライブラリが実際にロードされる前に呼び出されます-それが理にかなっていますか？

スクリプトが参照されているのではなくインラインである場合は、ページの下部に移動します。または（私の好みのオプション）スクリプトを外部.jsファイルに配置してから参照します。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="yourNewJSFile"></script>

編集：スクリプトを外部化する場合は、スクリプトが依存するJQueryライブラリの後で参照されるようにしてください:)

22
Krayg

これは恥ずかしいことですが、しばらくは我慢できなかったので、ここに投稿すると思いました。

jQuery UIをインストールしていませんでした、オートコンプリートを含まない従来のjQueryのみ（明らかに）。次のタグを追加すると、jQuery UIによるオートコンプリートが有効になりました。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

そして..

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"</script>

注目すべきは、フォームまたはフォームブロックのHTML値autocomplete="off"は、ブラウザがメソッド.autocomplete()を実行できないようにするが、jQuery UI関数をブロックしないことです。

6
BigTom

私の場合、別のチームメンバーがbootstrap.min.jsに追加するときにjquery.jsの別のバージョンを含めました。余分なjquery.jsを削除すると、問題は解決します

2
sky91

完全なjquery UIライブラリを使用していない場合、Widget、Menu、Position、またはCoreがない場合にこれをトリガーできます。 jQuery UIのバージョンに応じて、依存関係が異なる場合があります

1
Lotus

ASP.netでこのエラーが機能しています。 Visual Studioからアプリケーションを実行すると問題なく動作しましたが、プロジェクトを公開してテストすると、chrom Inspectデバッガーで「オートコンプリートは機能ではありません」というエラーが発生しました。 2つの環境の違いはweb.configの定義が原因であることがわかりました。コンパイルタグ内。 assign debug = "false"の場合、すべてのバンデル定義が実行され、リリースとしてコンパイルが行われます。 if debug = true "の場合、コンパイルはjsライブラリのバンデリングとミニファイニングを含まないデバッグステージ用です。したがって、環境間の違いがあります。

<system.web>
    <compilation debug="false" targetFramework="4.5.1"/>
    <httpRuntime targetFramework="4.5.1"/>
</system.web>

さらに、これら2つの環境を調べると、デバッグ環境ではどこでも（_Layout.cshtml）@ Scripts.Render（ "〜/ bundles/jquery"）がコード内にあり、（APP_Startの下で）BundleConfig.csがあることがわかりました。
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Static/js/lib/jquery-{version}.js", "~/Static/js/lib/jquery-ui.js"));

それは次のようになりました：

<script src="/Static/js/lib/jquery-1.12.4.js"></script>
<script src="/Static/js/lib/jquery-ui.js"></script>

および他の環境（debug = false）

<script src="/bundles/jquery?v=YOLEkbKJYtNeDq0o56xjzXWKoYzrF5Vkqgyc9Cb0YgI1"></script>

デバッグモードでは動作し、もう一方は問題を抱えています。

Js libの側面jquery-uiの2つのファイルを見ました：

jquery-ui.js jquery-ui.min.js

両方とも新しいmvcプロジェクトのテンプレートからデフォルトとして提供されることがわかりました。 jquery-ui.min.jsがライブラリから削除されると、問題は解決しました。

Jquery-ui.jsがBundleConfig.csで定義されていても、実際にはjquery-ui.min.jsが使用されたと信じています。

ところで、jquery-ui.min.jsには、それを含むjquery-ui.jsに追加されたオートコンプリート関数は含まれていませんでした。

乾杯。

0
Zohar Chiprut

ページがjQueryをロードする前に関数を呼び出しています。 $（document）.ready（function（）{//ここにコードを記述}）内でjQueryを使用することを常にお勧めします

あなたの場合：

$(document).ready(function(){
  $(function(){
    $( "#searcharea" ).autocomplete({
      source: "suggestions.php"
    });
   $( "#searchcat" ).autocomplete({
      source: "suggestions1.php"
    });
   });

}）;

0
Vicky Vishal

私の問題は、Visual Studioが未処理の例外をキャッチし、それ以上スクリプトを実行できないようにすることになりました。 IDEで実行していたため、問題がなかったときに問題が発生したように見えました。オートコンプリートは問題なく機能していました。 try/catchブロックを追加すると、IDEが幸せになりました。

 $.ajax({
            url: "/MyController/MyAction",
            type: "POST",
            dataType: "json",
            data: { prefix: request.term },
            success: function (data) {
                try {
                    response($.map(data, function (item) {
                        return { label: item.Name, value: item.Name };
                    }))
                } catch (err) { }

            }
        })
0
Sue

ページに次のようなスクリプトのセクションがある場合は、このセクション内からJqueryライブラリを必ず参照してください。

@section Scripts 
{ 
   <script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
}
0
bobcatBisto

私は同じ問題に直面して解決しようとしましたが、残念ながらそれはもう機能しません！同じ問題に直面していて、解決策が見つからない場合は、それが役に立つかもしれません。

webpackでjquery/jquery-uiをグローバルに設定する場合、このようにオートコンプリートをインポートする必要があります

import { autocomplete } from 'webpack-jquery-ui';

そして、htmlのheadセクションにjquery-ui.cssを含める必要があります。jquery-ui.cssがそれなしでは機能しない理由がわかりません。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

あなたの問題が解決されることを願っています。

また、次の3つを含めてインストールしてください。

  1. jquery-ui-css
  2. jquery-ui
  3. jquery
0
Robin

この問題が発生した場合は、常にオートコンプリート関数をキーアップ関数に配置し、ライブラリを追加したことを確認してください

$( "#searcharea" ).keyup(function(){
   $( "#searcharea" ).autocomplete({
      source: "suggestions.php"
   });
});
0
Naveen Roy