Question

我有一个json文件，它存放在github中用于测试目的。我的问题是如何根据用户使用ajax输入的第一个字符来获取数据，例如当我输入a或A时，“Applebees”会出现。

    var searchDevice = (function(){
          var $el = $('.form-wrapper');
          var $brandName = $el.find('#brandName');
          var $brandModel = $el.find('#brandModel');
          var $search = $el.find('#search');
          var brandName = '';
          var brandModel = '';

          $brandName.on('keyup', searchType);
          $brandModel.on('keyup', searchType);

                function searchType(e){
                  brandName =  $brandName.val();
                  brandModel = $brandModel.val();
                  brandModel.length > 0 && brandName.length > 0 ? $search.removeAttr("disabled") : $search.attr("disabled","disabled");  

                 if(brandName.length > 0){
                  $brandName.autocomplete({
                    minlength: 1,
                    source: function( request, response ) {

                    $.ajax({
                        url: "https://ronnelsanchez.github.io/diamond/routers.json",
                        dataType: "json",
                        data: {
                            searchText: request.term
                        },
                        success: function (data) {
                            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                            response($.map(data.routers, function (item) {
                                var text = item.homeTeam;
                              if ( text && ( matcher.test(text) ) ) {
                                    return {
                                        label: item.homeTeam,
                                    };
                             }
                            }));
                        },
                         error: function(data) {
                            alert("test");
                       }
                    }); // end Ajax request
                } // end source     
            })  
           } // end if 
          } // end function
    })();



This is the json structure:

{
    "routers": [{
            "point": "new GLatLng(40.266044,-74.718479)",
            "homeTeam": "Lawrence Library",
            "awayTeam": "LUGip",
            "markerImage": "images/red.png",
            "information": "Linux users group meets second Wednesday of each month.",
            "fixture": "Wednesday 7pm",
            "capacity": "",
            "previousScore": ""
        },
        {
            "point": "new GLatLng(40.211600,-74.695702)",
            "homeTeam": "Hamilton Library",
            "awayTeam": "LUGip HW SIG",
            "markerImage": "images/white.png",
            "information": "Linux users can meet the first Tuesday of the month to work out harward and configuration issues.",
            "fixture": "Tuesday 7pm",
            "capacity": "",
            "tv": ""
        },
        {
            "point": "new GLatLng(40.294535,-74.682012)",
            "homeTeam": "Applebees",
            "awayTeam": "After LUPip Mtg Spot",
            "markerImage": "images/newcastle.png",
            "information": "Some of us go there after the main LUGip meeting, drink brews, and talk.",
            "fixture": "Wednesday whenever",
            "capacity": "2 to 4 pints",
            "tv": ""
        },
        {
            "point": "JSPR(0101010101,0101010101)",
            "homeTeam": "Jasper Lepardo is the Best",
            "awayTeam": "Jasper Lepardo",
            "markerImage": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzxidVfEMBqaJBCgpAVTGsn7k70eZShuRdDeYkTD4je4A_PHtnxfL_bg",
            "information": "napaka Pogi ni Jasper",
            "fixture": "Pogi mo naman po Jasper",
            "capacity": "10 jasper",
            "tv": ""
        }
    ]
}

Answer 1

尝试这样的事情 - 参考Jquery autocomplete start from first character

var data = [
    {
    label: "Apple",
    value: "http://www.apple.com"
    },
    {
    label: "Google",
    value: "http://www.google.com"
   },
   {
    label: "Yahoo",
    value: "http://www.yahoo.com"
   },
   {
    label: "Bing",
    value: "http://www.bing.com"
   }];


   $(function() {
   $( "#tags" ).autocomplete({
          source: function( request, response ) {
               var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
             response( $.grep( data, function( item ){
                 return matcher.test( item.label );
             }) );
    },
    minLength: 1,
    select: function(event, ui) {
       event.preventDefault();
       $("#tags").val(ui.item.label);
       $("#selected-tag").val(ui.item.label);
       window.location.href = ui.item.value;
    },
   focus: function(event, ui) {
       event.preventDefault();
       $("#tags").val(ui.item.label);
   }
 });
});

Demo here

或者你可以选择这样的东西 - 的JavaScript -

(function() {
    var manufacturers = ['Volkswagen', 'Audi', 'Mercedes', 'Skoda', 'Toyota', 'Renault', 'Volvo', 'Mazda'];

    $("#list").autocomplete({
        source: manufacturers
    });

    // Overrides the default autocomplete filter function to search only from the beginning of the string
    $.ui.autocomplete.filter = function (array, term) {
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            return matcher.test(value.label || value.value || value);
        });
    };
})();

DEmo here

自动完成获取第一个输入字符的数据

1 个答案: