not ejemplo jquery html autocomplete autosuggest

jquery - ejemplo - .autocomplete no es una función Error



jquery autocomplete destroy (11)

Cargar la biblioteca de jQuery antes de que la biblioteca de Angularjs me ayudara.

<head> <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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head>

abajo está mi código

<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>

Y mi código HTML es

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

Y mi funcion es

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

He incluido esta página en un archivo separado con el código de búsqueda de mi sitio web y lo he incrustado en varias páginas. En mi página de índice, me está sugiriendo valores de los archivos de origen, pero en otras páginas me está dando error tipográfico en línea

$( "#searcharea" ).autocomplete({

El enlace de mi sitio web es: http://www.jodhpuryp.in/

Esta es la fuente de mi cuadro de autosugestión http://api.jqueryui.com/autocomplete/

Alguien puede decirme por qué recibo este error en otras páginas de mi sitio web mientras está trabajando en la página de índice. Cualquier ayuda es apreciada. Gracias


Encontré el problema, estaba incluyendo otro archivo jquery para mi traductor de google, estaban en conflicto entre ellos y resultaron en no cargar la función de autocompletar.


Está llamando a la función antes de que la página cargue jQuery. Siempre es recomendable usar jQuery dentro de $ (document) .ready (function () {// Su código aquí})

En tu caso:

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

});


Mi problema terminó siendo Visual Studio, que detectó una excepción no controlada e impidió que el script siguiera ejecutándose. Debido a que estaba ejecutando en el IDE, parecía que había un problema cuando no lo había. Autocompletar estaba funcionando bien. Agregué un bloque try / catch y eso hizo feliz al 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) { } } })


Para mi caso, mi otro miembro del equipo incluyó otra versión de jquery.js cuando él agregó bootstrap.min.js. Después de eliminar el jquery.js extra, el problema está resuelto


Si su página tiene una sección para secuencias de comandos como la siguiente, asegúrese de consultar su biblioteca Jquery desde esta sección.

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


Suena como autocompletar se llama antes de que la biblioteca que lo define se cargue realmente, ¿es lógico?

Si su script está en línea, en lugar de referenciado, muévalo al final de la página. O (mi opción preferida) coloque el script en un archivo .js externo y luego haga referencia a él:

<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>

Edición: si externaliza su script, asegúrese de que se haga referencia DESPUÉS de las bibliotecas JQuery en las que se basa :)


Tenga en cuenta que si no está utilizando la biblioteca de IU de jquery completa, esto se puede activar si falta Widget, Menú, Posición o Núcleo. Puede haber diferentes dependencias dependiendo de su versión de jQuery UI


Tengo este error trabajando en ASP.net. Cuando ejecuté la aplicación de Visual Studio funcionó bien, pero cuando publiqué el proyecto y lo probé, recibí el error "Autocompletar no es una función" en el depurador Chrom Inspeccionar. Descubrí que las deferencias entre dos entornos fueron causadas por una definición en web.config. en la etiqueta de compilación. Si asignar debug = "false", todas las definiciones de paquete se ejecutan y la compilación se realiza como una versión. Si debug = true ", la compilación es para una etapa de depuración que no incluye la agrupación y la biblioteca js minifyning. Por lo tanto, las referencias entre los entornos.

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

Además, al examinar esos dos entornos, vi que en el entorno de depuración en todas partes (_Layout.cshtml) @ Scripts.Render ("~ / bundles / jquery") estaba en el código, donde (bajo APP_Start) BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Static/js/lib/jquery-{version}.js", "~/Static/js/lib/jquery-ui.js"));

rendió como

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

y el otro entorno (depuración = falso)

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

En el modo de depuración funciona y el otro tiene el problema.

Aspecto del js lib vi dos archivos de jquery-ui:

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

Resulta que ambos vienen por defecto de la plantilla del nuevo proyecto mvc. Cuando se eliminó jquery-ui.min.js de la biblioteca, el problema se resolvió.

Creo que aunque se definió jquery-ui.js en BundleConfig.cs, en realidad se tomó jquery-ui.min.js.

Por cierto, jquery-ui.min.js no incluyó la función de autocomplificación aplicada a jquery-ui.js que la incluía.

aclamaciones.


cuando vea este problema, siempre coloque su función de autocompletado en la función keyup y asegúrese de haber agregado las bibliotecas

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


<head> <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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head>