2011-05-25 185 views
2

jQuery的錯誤我得到的是這樣的一個功能:與自動完成

<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).autocomplete({source: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"]}); 

所以問題是不是該功能缺失或圖書館沒有加載或類似的東西。

而現在的問題

爲什麼?

回答

0

您使用自動填充小部件的方式過於複雜 - 小部件實際上是爲了簡化您的操作。你並不需要:

  1. 調用上KEYUP這個小部件/ click事件
  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行。

+0

謝謝你的解釋:) 我只需要爲那些需要它的人添加一個require-autocompletion類。十分優雅。 – 2011-05-27 12:44:29

1
<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}); 

您未設置源。

+0

@ user763228:從我看到的例子,作爲參數傳遞的數組應該工作。 我試過,沒有源選項。我從字面上複製了你的例子並再次嘗試。 沒有骰子。 – 2011-05-25 11:12:25

+1

如果您在msg var try,$(「#」+ fieldName).autocomplete({source:msg.split(',')})中創建了一個字符串而不是數組, – John 2011-05-25 11:15:51

+0

好的。我已經修改了PHP腳本來返回一個命令分隔字符串,並添加分裂到味精。 錯誤仍然存​​在: 響應: 「蒙迪艾爾救援集團,蒙迪艾爾亞太地區,蒙迪艾爾救援集團,蒙迪艾爾毛里求斯,蒙迪艾爾泰國」 錯誤: $(「#」 +字段名).autocomplete不是一個函數 行453 – 2011-05-25 11:23:51