当前位置：首页 > news >正文

Auto Complete -- Typeahead 和DateRangePicker

news 来源：原创 2024/5/4 22:22:38

一个很好用的AutoComplete js：

https://twitter.github.io/typeahead.js/

这里是自己测试的一些demo：

<script src="jquery-1.11.1.min.js"></script>
<script src="typeahead.bundle.js"></script>
<script src="handlebars-v1.3.0.js"></script>
<p>
1.Basic
</p>

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>


<script>

var substringMatcher_basic = function(strs) {
  return function findMatches(q, cb) {
    var matches, substrRegex;
 
    // an array that will be populated with substring matches
    matches = [];
 
    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');
 
    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.push({ value: str });
      }
    });
 
    cb(matches);
  };
};
 
var _data_states_basic = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
 
$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  displayKey: 'value',
  source: substringMatcher_basic(_data_states_basic)
});

</script>

<p>
2.Using Bloodhound
</p>

<div id="bloodhound">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

<script>

var _data_states_bloodhound = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

var states_bloodhound = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: $.map(_data_states_bloodhound, function(state) { return { value: state }; })
});
 
// kicks off the loading/processing of `local` and `prefetch`
states_bloodhound.initialize();
 
$('#bloodhound .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  displayKey: 'value',
  // `ttAdapter` wraps the suggestion engine in an adapter that
  // is compatible with the typeahead jQuery plugin
  source: states_bloodhound.ttAdapter()
});

</script>

<p>
3. Pre-fetch (need to replace json URL)
</p>

<div id="prefetch">
  <input class="typeahead" type="text" placeholder="Countries">
</div>

<script>
var prefetch_countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  prefetch: {
    url: 'your json url here',
    filter: function(list) {
      return $.map(list, function(country) { return { name: country }; });
    }
  }
});
 
// kicks off the loading/processing of `local` and `prefetch`
prefetch_countries.initialize();
 
// passing in `null` for the `options` arguments will result in the default
// options being used
$('#prefetch .typeahead').typeahead(null, {
  name: 'prefetch_countries',
  displayKey: 'name',
  // `ttAdapter` wraps the suggestion engine in an adapter that
  // is compatible with the typeahead jQuery plugin
  source: prefetch_countries.ttAdapter()
});

</script>

<p>4.Custom Template</p>

<style>
#custom-templates .empty-message {
  padding: 5px 10px;
 text-align: center;
}

</style>

<div id="custom-templates">
  <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
</div>


<script>
var _data_states_template_countries = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

var custome_template_countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  local: $.map(_data_states_template_countries, function(state) { return { name: state }; })
});
 
// kicks off the loading/processing of `local` and `prefetch`
custome_template_countries.initialize();

$('#custom-templates .typeahead').typeahead(null, {
  
  displayKey: 'name',
  source: custome_template_countries.ttAdapter(),
  templates: {
    empty: [
      '<div class="empty-message">',
      'unable to find a country',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>')
  }
});
</script>

<p>5.multiple data set</p>

<style>
#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}
</style>

<div id="multiple-datasets">
  <input class="typeahead" type="text" placeholder="NBA and NHL teams">
</div>

<script>
var _data_nhlteam = [{ "team": "New Jersey Devils" },{ "team": "New York Islanders" },{ "team": "New York Rangers" },{ "team": "Philadelphia Flyers" },{ "team": "Pittsburgh Penguins" },{ "team": "Chicago Blackhawks" },{ "team": "Columbus Blue Jackets" },{ "team": "Detroit Red Wings" },{ "team": "Nashville Predators" },{ "team": "St. Louis Blues" },{ "team": "Boston Bruins" },{ "team": "Buffalo Sabres" },{ "team": "Montreal Canadiens" },{ "team": "Ottawa Senators" },{ "team": "Toronto Maple Leafs" },{ "team": "Calgary Flames" },{ "team": "Colorado Avalanche" },{ "team": "Edmonton Oilers" },{ "team": "Minnesota Wild" },{ "team": "Vancouver Canucks" },{ "team": "Carolina Hurricanes" },{ "team": "Florida Panthers" },{ "team": "Tampa Bay Lightning" },{ "team": "Washington Capitals" },{ "team": "Winnipeg Jets" },{ "team": "Anaheim Ducks" },{ "team": "Dallas Stars" },{ "team": "Los Angeles Kings" },{ "team": "Phoenix Coyotes" },{ "team": "San Jose Sharks" }];

var _data_nbateam = [{ "team": "Boston Celtics" },{ "team": "Dallas Mavericks" },{ "team": "Brooklyn Nets" },{ "team": "Houston Rockets" },{ "team": "New York Knicks" },{ "team": "Memphis Grizzlies" },{ "team": "Philadelphia 76ers" },{ "team": "New Orleans Hornets" },{ "team": "Toronto Raptors" },{ "team": "San Antonio Spurs" },{ "team": "Chicago Bulls" },{ "team": "Denver Nuggets" },{ "team": "Cleveland Cavaliers" },{ "team": "Minnesota Timberwolves" },{ "team": "Detroit Pistons" },{ "team": "Portland Trail Blazers" },{ "team": "Indiana Pacers" },{ "team": "Oklahoma City Thunder" },{ "team": "Milwaukee Bucks" },{ "team": "Utah Jazz" },{ "team": "Atlanta Hawks" },{ "team": "Golden State Warriors" },{ "team": "Charlotte Bobcats" },{ "team": "Los Angeles Clippers" },{ "team": "Miami Heat" },{ "team": "Los Angeles Lakers" },{ "team": "Orlando Magic" },{ "team": "Phoenix Suns" },{ "team": "Washington Wizards" },{ "team": "Sacramento Kings" }];

var nhlTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: _data_nhlteam
});
 
var nbaTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: _data_nbateam
});
 
nhlTeams.initialize();
nbaTeams.initialize();

$('#multiple-datasets .typeahead').typeahead({
  highlight: true
},
{
  displayKey: 'team',
  source: nbaTeams.ttAdapter(),
  templates: {
  header: '<h3 class="league-name">NBA Teams</h3>'
  }
},
{
  displayKey: 'team',
  source: nhlTeams.ttAdapter(),
  templates: {
   header: '<h3 class="league-name">NHL Teams</h3>'
  }
});

</script>

<p>
6. scrollable drop down
</p>

<style>
#scrollable-dropdown-menu .tt-dropdown-menu {
  max-height: 100px;
  width:600px;
  overflow-y: auto;
}
</style>

<div id="scrollable-dropdown-menu">
  <input class="typeahead" type="text" placeholder="Countries">
</div>

<script>
var _data_scrollable_dropdown_countries = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

var _data_scrollable_dropdown_countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  local: $.map(_data_states_template_countries, function(state) { return { name: state }; })
});
 
// kicks off the loading/processing of `local` and `prefetch`
_data_scrollable_dropdown_countries.initialize();

$('#scrollable-dropdown-menu .typeahead').typeahead(null, {
  name: 'countries',
  displayKey: 'name',
  source: _data_scrollable_dropdown_countries.ttAdapter()
});

</script>

另外，这个DateRangePicker可以考虑用来选择时间间隔，也是很不错的：

https://github.com/dangrossman/bootstrap-daterangepicker