當JSON來自URL時，自動完成功能無法正常工作？

我想實現一個jQuery自動完成控件到我們的HTML頁面，但我會從URL資源接收我的JSON。當JSON來自URL時，自動完成功能無法正常工作？

這是代碼。如果我將源設置爲內聯JSON數組（source: data），那麼自動完成功能很好。

如果我將源設置爲WCF調用（source: "http://MyServer:86/Service1.svc/GetStates"），那麼當我輸入任何字母時將顯示列表，但過濾/自動完成功能不起作用。

當JSON來自URL時，爲什麼不自動完成工作？

URL中的json看起來像這樣：[{"value":"AK","label":"Alaska"},{"value":"AL","label":"Alabama"}]，與內聯json格式完全相同。

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery UI Autocomplete: Using Label-Value Pairs</title> 
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
</head> 
<body> 
    <p>Default Behavior<br> 
     <input id="autocomplete1" type="text" placeholder="U.S. state name" name="code"></p> 
    <script> 
     var data = [ 
      { value: "AL", label: "Alabama" }, 
      { value: "AK", label: "Alaska" }, 
      { value: "AZ", label: "Arizona" }, 
      { value: "AR", label: "Arkansas" }, 
      { value: "CA", label: "California" } 
     ]; 
     $(function() { 
      $("#autocomplete1").autocomplete({ 
       source: "http://MyServer:86/Service1.svc/GetStates", 
       dataType: 'json' 
      }); 
     }); 
    </script> 
</body> 
</html>

來源

2017-08-31 rbhat

你看過開發控制檯中的輸出嗎？發生了任何錯誤，或者源代碼是否收到網絡請求？ – forrestmid

沒有javascript錯誤。組合框填充了正確的值。問題在於它沒有執行自動完成。 – rbhat

從jQuery Autocomplete Documentation

當一個字符串被使用的作爲源的值]中，自動完成插件期望字符串以指向一個URL將返回JSON數據的資源。它可以位於同一主機上或不同的主機上（必須支持CORS）。 自動填充插件不會過濾結果，而是會爲查詢字符串添加一個術語字段，服務器端腳本應使用該字段過濾結果。例如，如果源選項設置爲「http://example.com」，並且用戶鍵入foo，則GET請求將被設置爲http://example.com?term=foo。數據本身可以採用與上述本地數據相同的格式。

這基本上表明您的URL，該端點返回JSON，將會有term查詢參數將看起來像http://MyServer:86/Service1.svc/GetStates?term=AL被調用。然後，您需要一個服務器端腳本來接受該術語，並通過自動完成腳本發送到您的服務器的term參數篩選返回到自動填充的固定JSON。

來源

2017-08-31 18:21:47 forrestmid

我明白你的意思，但我不知道如何在代碼中實現這一點。 – rbhat

您不能使用靜態JSON文檔。你必須實現一些服務器端腳本來讀取JSON數據並根據'term'參數進行過濾。因此，'http：// MyServer：86/Service1.svc/GetStates'需要讀取'term'參數，然後根據'term'的值過濾該JSON文檔，最後返回已被過濾的JSON。 – forrestmid

處理參數不是問題;我將如何在上面張貼的HTML中添加該參數？我將如何包含'term'參數？ – rbhat

如果你使用url字符串，那麼你需要在後端實現它。而不是你可以使用源作爲功能選項， this stack overflow post和答案有一個如何實現這一目標的例子。

來源

2017-08-31 18:27:50

當JSON來自URL時，自動完成功能無法正常工作？

回答

相關問題