使用 FuzzySearch 自动完成文本框

如何解决使用 FuzzySearch 自动完成文本框

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

这是我的代码：

$("[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",}),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
});

解决方法

 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",}),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
    
                });
            },});