jQuery的自動完成擴展使用JSON字符串數組

<script> 
 

 
     $(function() { 
 
      var myArray = '[{"OriginId":2609,"OriginName":"14th Mile Stone"},{"OriginId":2007,"OriginName":"Aachara"},{"OriginId":2220,"OriginName":"Aarni"},{"OriginId":2216,"OriginName":"Aasind"},{"OriginId":637,"OriginName":"Aathankarai"},{"OriginId":1292,"OriginName":"Aatthur"},{"OriginId":1144,"OriginName":"Aavanam"},{"OriginId":2909,"OriginName":"Abad (Airport)"},{"OriginId":379,"OriginName":"Abiramam"},{"OriginId":4556,"OriginName":"ABLOLI"},{"OriginId":4554,"OriginName":"ABLOLI KALE HOUSE"},{"OriginId":2346,"OriginName":"Abohar"},{"OriginId":2500,"OriginName":"Abu Road"},{"OriginId":4395,"OriginName":"ACHALPUR"},{"OriginId":1594,"OriginName":"Achanta"},{"OriginId":2769,"OriginName":"Adda Road"}]'; 
 

 
      var jsonString = JSON.parse(myArray); 
 
      $('#busPoint').autocomplete({ 
 
       source: function (request, response) { 
 
        $.getJSON(jsonString, function (data) { 
 
         console.log(data) 
 
         response($.map(data.list, function (value, key) { 
 
          return { 
 
           label: value, 
 
           value: key 
 
          }; 
 
         })); 
 
        }); 
 
       }, 
 
       minLength: 2, 
 
       delay: 100 
 
      }); 
 

 
     }); 
</script>

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <title>jQuery UI Autocomplete</title> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
</head> 
 
<body> 
 
    <div class="ui-widget"> 
 
     <hr /> 
 
    <input type="text" id="busPoint"> 
 
    </div> 
 
    </body> 
 
</html>

我的HTML代碼

<div class="ui-widget"> 
    <hr />  
    <input type="text" id="busPoint"> 
</div>

我的Javascript代碼

<script> 

    $(function() { 
     var myArray = '[{"OriginId":2609,"OriginName":"14th Mile Stone"},{"OriginId":2007,"OriginName":"Aachara"},{"OriginId":2220,"OriginName":"Aarni"},{"OriginId":2216,"OriginName":"Aasind"},{"OriginId":637,"OriginName":"Aathankarai"},{"OriginId":1292,"OriginName":"Aatthur"},{"OriginId":1144,"OriginName":"Aavanam"},{"OriginId":2909,"OriginName":"Abad (Airport)"},{"OriginId":379,"OriginName":"Abiramam"},{"OriginId":4556,"OriginName":"ABLOLI"},{"OriginId":4554,"OriginName":"ABLOLI KALE HOUSE"},{"OriginId":2346,"OriginName":"Abohar"},{"OriginId":2500,"OriginName":"Abu Road"},{"OriginId":4395,"OriginName":"ACHALPUR"},{"OriginId":1594,"OriginName":"Achanta"},{"OriginId":2769,"OriginName":"Adda Road"}]'; 

     var jsonString = JSON.parse(myArray); 
     $('#busPoint').autocomplete({ 
      source: function (request, response) { 
       $.getJSON(jsonString, function (data) { 
        response($.map(data, function (value, key) { 
         return { 
          label: value, 
          value: key 
         }; 
        })); 
       }); 
      }, 
      minLength: 2, 
      delay: 100 
     }); 
    }); 

</script>

我試過這段代碼，但它不工作。我需要提取選擇的originid和名稱。大部分示例都包含到外部json或webservice拉的連接，但我的數據位於同一頁面上。如果他們是任何其他我可以使用此外，請讓我知道

來源

2016-12-29 Akhil RJ

你可以創建jsfiddle來調試 – rahulsm

添加請檢查 –

您的腳本標記沒有任何結束標記。此外，我已經在本地測試您的代碼，並且發現該代碼位於該行之後：$.getJSON(jsonString, function (data) {未執行。經過小小的谷歌搜索之後，我發現$ .getJSON用於從服務器端獲取數據，但是在您的代碼中，這不是必要的，因爲您將數據存儲在本地變量中。

您的解決方案可能是這樣的：

<!doctype html> 
<html lang="en"> 

<head> 
    <title>jQuery UI Autocomplete</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
     $(function() { 
      var myArray = '[{"OriginId":2609,"OriginName":"14th Mile Stone"},{"OriginId":2007,"OriginName":"Aachara"},{"OriginId":2220,"OriginName":"Aarni"},{"OriginId":2216,"OriginName":"Aasind"},{"OriginId":637,"OriginName":"Aathankarai"},{"OriginId":1292,"OriginName":"Aatthur"},{"OriginId":1144,"OriginName":"Aavanam"},{"OriginId":2909,"OriginName":"Abad (Airport)"},{"OriginId":379,"OriginName":"Abiramam"},{"OriginId":4556,"OriginName":"ABLOLI"},{"OriginId":4554,"OriginName":"ABLOLI KALE HOUSE"},{"OriginId":2346,"OriginName":"Abohar"},{"OriginId":2500,"OriginName":"Abu Road"},{"OriginId":4395,"OriginName":"ACHALPUR"},{"OriginId":1594,"OriginName":"Achanta"},{"OriginId":2769,"OriginName":"Adda Road"}]'; 

      var jsonString = JSON.parse(myArray); 
      $('#busPoint').autocomplete({ 
       source: $.map(jsonString, function(item) { 
        return item.OriginName; 
       }), 
       select: function(event, ui) { 
        var selectecItem = jsonString.filter(function(value) { 
         return value.OriginName == ui.item.value; 
        }); 
        alert("OriginId: " + selectecItem[0].OriginId + ", OriginName: " + selectecItem[0].OriginName); 
       }, 
       minLength: 2, 
       delay: 100 
      }); 

     }); 
    </script> 
</head> 

<body> 
    <div class="ui-widget"> 
     <hr /> 
     <input type="text" id="busPoint"> 
    </div> 
</body> 

</html>

我在本地進行了測試。讓我知道如果這就是你想要的。

來源

2016-12-29 14:16:21

那麼他們的任何方式來處理這種情況？ –

這個答案已修改，請檢查並讓我知道。 –

謝謝，它工作:) –

jQuery的自動完成擴展使用JSON字符串數組

回答

相關問題