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

我有一个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": "" 
     } 
    ] 
}

来源

2016-09-26 John Wick

而不是'minlength：1，';你可以试试'minLength：1，'。选项必须区分大小写。 – vijayP

你想要所有的值是自动完成的组件？ –

我已将它更改为minLength：1，但是当我键入静态图像时，它会显示所有带有字符的数据。不过感谢vijayP。 –

试着这么做this-- 参考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

来源

2016-09-26 07:40:56

让我知道它是否有帮助 –

谢谢，但它不使用ajax。 –

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

回答

相关问题