Angular js自动完成预先输入

Posted 2023-02-24

【中文标题】Angular js自动完成预先输入

【英文标题】：Angular js autocomplete typeahead

【发布时间】：2016-01-04 10:11:41

【问题描述】：

我需要实现 angular js typeahead 指令以根据特定国家/地区搜索城市。两者都应该是自动完成下拉菜单。 那就是当我在国家文本框中输入时，它应该在我输入的关键字的下拉列表中向我显示国家的建议。 当我输入城市文本框时，它应该向我显示仅与所选国家相关的城市建议。 我只为 1 个文本框实现了预输入功能。 现在我需要根据选定的国家搜索城市。

比如如果我的json如下

$scope.data = [
        countries: [
                id: 1,
        name: country1
            , 
        
                id: 2,
        name: country2
                , 
        
                id: 3,
        name: country3
            ]
    cities: [
            id: 1,
            city_name: 'city1'
        country_id: 1
        , 
            id: 2,
            city_name: 'city2'
        country_id: 2
        , 
            id: 3,
            city_name: 'city3'
        country_id: 2
        , 
            id: 4,
            city_name: 'city4'
        country_id: 3
        ],


    ];

如果我在第一个文本框中选择了 country2，那么在第二个文本框中它应该只显示 city2 和 city3，因为它们属于 country2

【问题讨论】：

好吧，如果您已经实现了一个下拉菜单，那么城市下拉菜单应该是相同的逻辑，只是您将使用前一个下拉菜单 (ngModel) 作为过滤城市的参数。顺便说一句，你的问题不是很清楚。

感谢您的回复。我已经进行了编辑以准确解释我想要的内容。我想知道如何根据国家参数准确过滤城市

【参考方案1】：

您可以使用过滤器。

为 html 添加过滤器语法

<input ng-model="selectedCtry" 
    typeahead="ctry as ctry.name for ctry in data.countries"/>

<input ng-model="selectedCity" 
    typeahead="city as city.name for city in data.cities | filter: country_id: selectedCountry.id "/>

示例 - http://codepen.io/jusopi/pen/jWyXeL?editors=101

【参考方案2】：

在国家/地区文本框中调用模糊并传递国家/地区或国家/地区 ID 的服务器；并根据国家/地区获取城市列表