Блог

Я получил функцию, которая выглядит следующим образом:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>

function getValues (fieldName, action){
            $("#"   fieldName).keyup(function () {
                if (this.value != this.lastValue){
                    if (this.timer) clearTimeout(this.timer);
                    this.timer = setTimeout(function () {
                        //$( "#" fieldName ).autocomplete({source:"http://www.expat-job.com/ajax/"   action   "/keyword/"   $("#"   fieldName).val()});
                        $.ajax({
                            type: "POST",
                            dataType: 'json',
                            url:"http://www.expat-job.com/ajax/"   action   "/keyword/"   $("#"   fieldName).val(),
                            success:function(msg) {
                                //splitedmsg = msg.split(',');
                              $( "#" fieldName ).autocomplete(msg);
                            }
                        });
                    }, 200);
                    this.lastValue = this.value;
                }
            });
        }
  

Затем он вызывается следующим образом:

 $('input').live('click', function() {

                var word = $(this).attr('id');
                var splitedWord = word.split('-');
                switch(splitedWord[1])
                {
                    case 'CompanyName':
                        getValues(word, 'cv-company');
                    case 'DegreeName':
                        getValues(word, 'degree-name');
                    case 'InstituteName':
                        getValues(word, 'institute-name');
                    case 'LanguageName':
                        getValues(word, 'language-name');
                    case 'CertificationName':
                        getValues(word, 'certification-name');
                    case 'SkillName':
                        getValues(word, 'skill-name');
                    case 'JobTitle':
                        getValues(word, 'job-title');
                }
            });
  

Ответ ajax выглядит следующим образом:

 ["Mondial Assistance","Mondial Assistance Asia Pacific","Mondial Assistance Group","Mondial Assistance Mauritius","Mondial Assistance Thailand"]
  

Это массив, завернутый в json_encode().

Моя проблема заключается в части автозаполнения:

  $( "#" fieldName ).autocomplete(msg);
  

Я перепробовал все возможные способы ввода данных. Я повторил строку и разделил ее, чтобы получить массив.

Я использовал другой синтаксис: $ («#» fieldName ).автозаполнение ({источник: msg});

Я всегда получаю одно и то же сообщение об ошибке:

 $("#"   fieldName).autocomplete is not a function
success()cv (line 453)
msg = "["Mondial Assistance","...l Assistance Thailand"]"
F()jquery.min.js (line 19)
F()jquery.min.js (line 19)
X = 0
  

После долгого тестирования я обнаружил, что это работает с простым тестом, подобным этому:

 $( "#" fieldName ).autocomplete({source: ["orange","apple","pear"]});
  

Итак, проблема не в том, что функция отсутствует или библиотека не загружена или что-то в этом роде.

И теперь вопрос

Почему?!

 <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 

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

 $( "#" fieldName ).autocomplete({source: msg} ); 
  

Вы не задаете источник.

Способ, которым вы используете виджет автозаполнения, чрезмерно сложен — виджет на самом деле должен упростить для вас работу. Вам НЕ нужно:

1. Вызывайте этот виджет при вводе / нажатии событий
2. Установите тайм-ауты
3. Выполнять вызовы AJAX

Вот как вы это используете:

 $("input.requires-autocomplete").each(function () { // add "requires-autocomplete" class to appropriate inputs
  var action;
  switch ($(this).attr("id").split("-")[1]) {
  case "CompanyName":
    action = "cv-company";
    break; // you need to add breaks
  case "DegreeName":
    action = "degree-name";
    break;
  case "InstituteName":
    action = "institute-name";
    break;
  case "LanguageName":
    action = "language-name";
    break;
  case "CertificationName":
    action = "certification-name";
    break;
  case "SkillName":
    action = "skill-name";
    break;
  case "JobTitle":
    action = "job-title";
    break;
  }
  $(this).autocomplete({
    minLength: 2, // widget waits until 2 or more characters are entered
    delay: 500, //  widget waits until 500 ms past the last keystroke
    source: function (request, response) { // specifying a URL that returns JSON/JSONP was enough
                                           // but in that case the server-side script must expect a query string parameter
                                           // "term" (text inside the control) and "callback" (for JSONP requests)
                                           // not your case so we do it manually
                                           // we call your script via getJSON
                                           // pass the text inside the control in the format expected by your script
                                           // and call the response funciton passing in the JSON data
                                           // the last statement is short-circuited by passing response as the second
                                           // parameter to getJSON, which effectively calls the response function
                                           // and passes in the response JSON data
      $.getJSON("http://www.expat-job.com/ajax/"   action   "/keyword/"   request.term, response);
    }
  });
});
  

Если убрать комментарии и логику переключения, оставшийся код составит примерно 5-6 строк.