Question

＆＃13;

<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>

＆＃13;

<!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>

＆＃13;

我的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>

我已尝试过此代码，但它无效。我需要在select上提取originid和name。大多数示例包含与外部json或webservice pull的连接，但我的数据位于同一页面上。如果他们是我可以使用的任何其他，请告诉我

Answer 1

您的脚本标记没有任何结尾标记。此外，我在本地测试你的代码并发现这一行之后的代码：$.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>

我在本地测试过它。如果那就是你想要的，请告诉我。

带有JSON数组字符串的Jquery AutoComplete Extender

1 个答案: