2015-10-09 2 views
0

Я пытаюсь реализовать функцию автозаполнения JQuery в поле ввода на веб-сайте. Инспектор дает мне сообщение об ошибке:JQuery autocomplete не является функцией

«Непринятый типError: $ (...). Autocomplete не является функцией».

Я считаю, что проблема может иметь отношение к порядку моих тегов скриптов, но до сих пор все, что я пробовал, не сработало. Вот мой контент:

<head> 
<title></title> 
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
    var schools = new Array(); 
     $(document).ready(function() { 

      $("#school").autocomplete ({ 
       minLength: 2, 
       source: schools, 
       select: function (e, ui) { 
        e.target.value = ui.item.label; 
        $("#schoolValue").val(ui.item.value); 
        e.preventDefault(); 
       } 
      }); 
    </script> 
    </body> 

ответ

1

В приведенном выше коде не похоже, что вы правильно закрываете функцию готовности.

<head> 
<title></title> 
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
    var schools = new Array(); 
     $(document).ready(function() { 

      $("#school").autocomplete ({ 
       minLength: 2, 
       source: schools, 
       select: function (e, ui) { 
        e.target.value = ui.item.label; 
        $("#schoolValue").val(ui.item.value); 
        e.preventDefault(); 
       } 
      }); 
     }); 
    </script> 
    </body> 
+0

Жаль, что я избегаю скопировал в свой пост. В моем фактическом коде это правильно закрыто. Есть ли у вас другие предложения? – Christian

+0

Да, я проверил бы рядом, чтобы убедиться, что jqueryui был полностью загружен, прежде чем вы пытались его использовать. – AtheistP3ace

2

Вы не определили какой-либо элемент с идентификатором school. Проверьте ниже рабочий код, чтобы сравнить его с вашим.

var schools = ['abc', 'xyz']; 
 
$(document).ready(function() { 
 

 
    $("#school").autocomplete({ 
 
    minLength: 2, 
 
    source: schools, 
 
    select: function(e, ui) { 
 
     e.target.value = ui.item.label; 
 
     $("#schoolValue").val(ui.item.value); 
 
     e.preventDefault(); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<head> 
 
    <title></title> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
</head> 
 

 
<body> 
 
    <label for="school">Tags:</label> 
 
    <input id="school"> 
 
</body>

0

Похоже, что это может быть состояние гонки, а это означает, что скрипт JQuery не закончил загрузку к тому времени, вы начинаете пытаться использовать его. У вас есть документ, готовый, что хорошо, но это только проверяет, что DOM готов, а не то, что асинхронно загруженные скрипты выполняются при загрузке.

Есть несколько ответов на это здесь и далее: How to make script execution wait until jquery is loaded

Но короче говоря, вы можете defer выполнение Вашего метода до window.jQuery возвращает истину, попробуйте $(window).load или вы можете использовать что-то вроде require.js, чтобы сделать это для вас , Вы также должны прикоснуться к своим тегам сценария:

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
1

Код, похоже, работает, но вам нужно инициализировать свой массив школ. См. Приведенный ниже пример.

Также помните, что вам нужно набрать не менее двух букв для раскрывающегося списка.

var schools = ['aaaaa', 'bbbbb', 'cccccc', 'ddddd']; 
 

 
$(document).ready(function() { 
 

 
    $("#school").autocomplete({ 
 
    minLength: 2, 
 
    source: schools, 
 
    select: function(e, ui) { 
 
     e.target.value = ui.item.label; 
 
     $("#schoolValue").val(ui.item.value); 
 
     e.preventDefault(); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"> 
 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
 

 
Search school 
 
<input id="school" type="text"> 
 
<br/><br/>School selected 
 
<input type="text" id="schoolValue" />

Смежные вопросы