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拉的连接，但我的数据位于同一页面上。如果他们是任何其他我可以使用此外，请让我知道

你可以创建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>

我在本地进行了测试。让我知道如果这就是你想要的。

那么他们的任何方式来处理这种情况？ –

这个答案已修改，请检查并让我知道。 –

谢谢，它工作:) –

jQuery的自动完成扩展使用JSON字符串数组

相关推荐