如何在cshtml页面中创建位置选择框答案

【问题标题】：How to create location select box in cshtml page如何在cshtml页面中创建位置选择框
【发布时间】：2022-12-09 12:45:19
【问题描述】：

我想为位置字段创建一个选择框，如果在其中键入任何字母，则应调用 API 并在下拉列表中获取位置详细信息

我尝试了下面的代码但没有用

<select class="js-data-example-ajax form-control" id="FilterLocation"></select>
@Html.Hidden("FilterLocation", new { id = "locationId"   })

在下面代码的脚本中

 function setLocation() {
        $('.js-data-example-ajax').select2({
            ajax: {
                type: 'PUT',
                url: function (params) {
                    return '/api/GoogleCustomSearch/getLocation?matchingName=' + params.term
                },
                delay: 250,
                data: function (params) {
                    var query = {

                    }

                    // Query paramters will be ?search=[term]&page=[page]
                    return query;
                },
                processResults: function (data) {
                    data = JSON.parse(data);

                    let results = []
                    if (data.location !== null) {
                        data.location.forEach((e) => {
                            results.push({
                                id: e,
                                text: e
                            })
                        })
                    }

                    return {
                        results: results
                    };
                }
            },
            placeholder: "Search"
        })
        $('.js-data-example-ajax').on('change',function(e){
            var selVal = $('#FilterLocation').val()
            $('#locationId').val(selVal)
            //getZipCodeForDynamic(selVal)
        })

        var $newOption = $("<option selected='selected'></option>")
        $("#FilterLocation").append($newOption).trigger('change');
    }

上面的代码没有下拉选项。

【问题讨论】：

标签： asp.net-core select razor jquery-select2

【解决方案1】：

这是 select2 的工作演示：看法：

<select id="mySelect2" class="js-data-example-ajax" style="width:200px"></select>

js:

$('#mySelect2').select2({
            ajax: {
                type: 'PUT',
                url: "GetSelect2Data",
                delay: 250,
                data: function(params) {
                    var query = {
                        search: params.term,
                        //page: params.page || 1
                    }

                    // Query parameters will be ?search=[term]&page=[page]
                    return query;
                },
                processResults: function(data) {
                    //data = JSON.parse(data);

                    let results = []
                    if (data.location !== null) {
                        data.location.forEach((e) => {
                            results.push({
                                id: e,
                                text: e
                            })
                        })
                    }

                    return {
                        results: results
                    };
                }
            },
            placeholder: "Search"
        });

模型：

public class Select2Model {
        public List<string> Location { get; set; }
    }

行动：

[HttpPut]
        public ActionResult GetSelect2Data(string Search)
        {
           
            return Json(new Select2Model() { Location = new List<string> { "a"+Search,"b" + Search, "c" + Search } });
        }

结果：

【讨论】：