带有模糊搜索的自动完成文本框

Question

我编写了一个自动完成文本框的代码，其中 select 下拉列表中的值并显示了 selected 在地图上的位置。但现在我遇到了一个问题，它会显示这些值如果拼写错误。就像模糊搜索一样。我在互联网上找到了与此相关的东西。但是我无法实现它。

这是我的代码：

$("[id$=txtSearch]").autocomplete({
        source: function (request, response) {

            $.ajax({
                url: 'SearchCollege.aspx/GetList',
                data: JSON.stringify({
                    prefix: request.term, Latitude: '', Longitude: '', selectDistrict: districts, selectSector: sectors,
                    selectCourses: course, columnname: columnname, columnvalue: columnvalue
                }),


                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.NAME,
                            val: item
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, item) {
            let it = item.item.val;
            var positionFeature = new ol.Feature();
            positionFeature.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 6,
                    fill: new ol.style.Fill({
                        color: '#3399CC'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#fff',
                        width: 2
                    })
                })
            }));
            var labelFeature = new ol.Feature();
            labelFeature.setStyle(new ol.style.Style({
                text: new ol.style.Text({
                    font: '14px Calibri,sans-serif',
                    overflow: true,
                    text: item.item.val.NAME,
                    fill: new ol.style.Fill({
                        color: "#000",
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#fff',
                        width: 3,

                    }),
                }),

            }))

            new ol.layer.Vector({
                map: window.mapAnalysis,
                source: new ol.source.Vector({
                    features: [positionFeature, labelFeature]
                })
            });
            Geocoordinates = ol.proj.fromLonLat([it.LONG, it.LAT]);

            positionFeature.setGeometry(Geocoordinates ?
                new ol.geom.Point(Geocoordinates) : null);
            view.animate({
                center: Geocoordinates,
                duration: 200,
                zoom: 9

            });

        },

        minLength: 1
});

Answer 1

 var fuzzyhound = new FuzzySearch({ output_limit: 10 }); 
 $("[id$=txtSearch]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: 'SearchCollege.aspx/GetList',
                    data: JSON.stringify({
                        prefix: '', Latitude: '', Longitude: '', selectDistrict: districts, selectSector: sectors,
                        selectCourses: course, columnname: columnname, columnvalue: columnvalue
                    }),
    
    
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        namearr = [];
                        dimarr = [];
                        for (i = 0; i < data.d.length; i++) {
                            namearr.push(data.d[i].NAME);
                            dimarr.push({ "NAME": data.d[i].NAME, "LAT": data.d[i].LAT, "LONG": data.d[i].LONG })
                        }
                        fuzzyhound.setOptions({
                            source: namearr
    
                        })
                        response(fuzzyhound.search(request.term));
    
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                })
            },
            select: function (e, item) {
                var PLatitude;
                var PLongitude;
                for (i = 0; i < dimarr.length; i++) {
                    if (dimarr[i].NAME == item.item.label) {
                        PLatitude = dimarr[i].LAT
                        PLongitude = dimarr[i].LONG
                    }
                }
                //let it = item.item.val;
                var positionFeature = new ol.Feature();
                positionFeature.setStyle(new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 6,
                        fill: new ol.style.Fill({
                            color: '#3399CC'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#fff',
                            width: 2
                        })
                    })
                }));
                var labelFeature = new ol.Feature();
                labelFeature.setStyle(new ol.style.Style({
                    text: new ol.style.Text({
                        font: '14px Calibri,sans-serif',
                        overflow: true,
                        text: item.item.label,
                        fill: new ol.style.Fill({
                            color: "#000",
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#fff',
                            width: 3,
    
                        }),
                    }),
    
                }))
    
                new ol.layer.Vector({
                    map: window.mapAnalysis,
                    source: new ol.source.Vector({
                        features: [positionFeature, labelFeature]
                    })
                });
                Geocoordinates = ol.proj.fromLonLat([PLongitude, PLatitude]);
    
                positionFeature.setGeometry(Geocoordinates ?
                    new ol.geom.Point(Geocoordinates) : null);
                view.animate({
                    center: Geocoordinates,
                    duration: 200,
                    zoom: 9
    
                });
            },
        });

带有模糊搜索的自动完成文本框

AutoComplete TextBox with FuzzySearch

javascript

jquery

autocomplete

fuzzy-search