Question

我有一个jquery ui自动完成输入，我希望显示另一个接一个的下拉列表。例如：如果我输入两个像ba这样的城市名字，它会显示一个下拉列表：亚的斯亚贝巴，巴格达，巴库，巴马科和曼谷。如果我选择其中一个（曼谷）并按空格键，将显示另一个下拉菜单（在同一个输入框中）：曼谷住宿，曼谷餐厅，曼谷景点和曼谷交通。我可以这样做，但这是第一次。当我更改像ab这样的关键字时。它应该显示阿布扎比，阿布贾等，但下拉列表无法显示。这是脚本：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function() {
                var Cities = [
                    'Abu Dhabi',
                    'Abuja',
                    'Accra',
                    'Amsterdam',
                    'Addis Ababa',
                    'Baghdad',
                    'Baku',
                    'Bamako',
                    'Bangkok',
                    'Beijing',
                    'Cairo',
                    'Canberra',
                    'Caracas'
                ];
                $('#dest').autocomplete({
                    source: Cities,
                    minLength: 2,
                    select: function (event, ui) {
                        $(this).val(ui.item.value);
                        $(this).blur();
                        $(this).focus();
                        //the second autocomplete
                        var more=[
                            ui.item.value + ' Accommodation',
                            ui.item.value + ' Restaurants',
                            ui.item.value + ' Sights',
                            ui.item.value + ' Transport'
                        ];
                        $('#dest').autocomplete({
                            source: more,
                            select: function (event, ui) {
                                $(this).val(ui.item.value);
                            }
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <div>
            <span><em><strong>City</strong></em></span>
            <br />
            <span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
        </div>
    </body>
</html>

我不想为此使用另一个输入框。

http://jsfiddle.net/Lngzbjc6/5/

Answer 1

经过多次尝试，我得到了解决方案（我不知道这是否是最好的）。这是完整的代码。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function() {
                var Cities = [
                    'Abu Dhabi',
                    'Abuja',
                    'Accra',
                    'Amsterdam',
                    'Addis Ababa',
                    'Baghdad',
                    'Baku',
                    'Bamako',
                    'Bangkok',
                    'Beijing',
                    'Cairo',
                    'Canberra',
                    'Caracas'
                ];
                $('#dest').autocomplete({
                    source: Cities,
                    minLength: 2,
                    select: function (event, ui) {
                        $(this).val(ui.item.value);
                        $('#temp_val').val(ui.item.value);
                        $(this).blur();
                        $(this).focus();
                        //the second autocomplete
                        var more=[
                            ui.item.value + ' Accommodation',
                            ui.item.value + ' Restaurants',
                            ui.item.value + ' Sights',
                            ui.item.value + ' Transport'
                        ];
                        $('#dest').autocomplete({
                            source: more,
                            select: function (event, ui) {
                                $(this).val(ui.item.value);
                                $('#temp_val').val(ui.item.value);
                            }
                        });
                    }
                });
                $('#dest').keypress(function(event){
                    var dest = $.trim($('#dest').val());
                    var temp_val = $.trim($('#temp_val').val());

                    if(temp_val != ''){
                        if(event.which != 32)
                            $('#dest').autocomplete('option','source',Cities);
                        else{
                            var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
                            var found_arr='';
                            $.each(arr,function(index,value){
                                if(temp_val.indexOf(value) >= 0){
                                    found_arr=value;
                                    return false;
                                }
                            });
                            if(found_arr != '')
                                temp_val=temp_val.replace(found_arr,'');
                            var more=[
                                temp_val + ' Accommodation',
                                temp_val + ' Restaurants',
                                temp_val + ' Sights',
                                temp_val + ' Transport'
                            ];
                            $('#dest').autocomplete('option','source',more);
                        }   
                    }
                });
            });
        </script>
    </head>
    <body>
        <div>
            <span><em><strong>City</strong></em></span>
            <br />
            <span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
            <input type="hidden" id="temp_val" name="temp_val" value="">
        </div>
    </body>
</html>

更改关键字后，jQuery自动完成功能无法显示下拉结果（两次自动完成）

1 个答案: