*Core Effects Overview***核心的影響概覽***

*Core Effects Overview*

***核心的影響概覽**

*Introduction

The local array
autocompleter. Used
when you’d prefer
to inject an array of
autocompletion options
 into the page, rather than sending out Ajax queries*

*Syntax

new Autocompleter.Local

(id_of_text_field, id_of_div_to_populate,

 array_of_strings, options  *

*The constructor takes four parameters.

 The first two are, as usual, the id of the 

monitored textbox, and id of the 

autocompletion menu. The third is an array

 of strings that you want to autocomplete 

from, and the fourth is the options block.  *

*Extra local autocompletion options*

*

Option
Default Value
Description
choices
10
How many autocompletion choices to offer
partialSearch
true
If false, the autocompleter will match entered  

text only at the beginning of strings in the  

autocomplete array. Defaults to true, which will 

 match text at the beginning of any word in the  

strings in the autocomplete array. If you want to  

search anywhere in the string, additionally set the 

 option fullSearch to true
fullSearch
false
Search anywhere in autocomplete array strings.
partialChars
2
How many characters to enter before triggering 

 a partial match (unlike minChars, which defines 

 how many characters are required to do any 

match at all).
ignoreCase
true
Whether to ignore case when autocompleting

It’s possible to pass in a custom function as the    

 ‘selector’ option, if you prefer to write your  

own autocompletion logic. In that case, the 

other options above will not apply unless  

you support them          *


*Example

HTML
<p>
  <label for="bands_from_the_70s">Your 
favorite rock  band from the 70's:</label> 
  <br />
  <input id="bands_from_the_70s" autocomplete=
"off" size="40" type="text" value="" /></p><div class="autocomplete" id="band_list" style 
="display:none"></div>

**Javascript :
var bandsList = [ 
  'ABBA',
  'AC/DC',
  'Aerosmith',
  'America',
  'Bay City Rollers',
  'Black Sabbath',
  'Boston',
  'David Bowie',
  'Can',
  'The Carpenters',
  'Chicago',
  'The Commodores',
  'Crass',
  'Deep Purple',
  'The Doobie Brothers',
  'Eagles',
  'Fleetwood Mac',
  'Haciendo Punto en Otro Son',
  'Heart',
  'Iggy Pop and the Stooges',
  'Journey',
  'Judas Priest',
  'KC and the Sunshine Band',
  'Kiss',
  'Kraftwerk',
  'Led Zeppelin',
  'Lindisfarne (band)',
  'Lipps, Inc',
  'Lynyrd Skynyrd',
  'Pink Floyd',
  'Queen',
  'Ramones',
  'REO Speedwagon',
  'Rhythm Heritage',
  'Rush',
  'Sex Pistols',
  'Slade',
  'Steely Dan',
  'Stillwater',
  'Styx',
  'Supertramp',
  'Sweet',
  'Three Dog Night',
  'The Village People',
  'Wings (fronted by former Beatle 
Paul McCartney)',
  'Yes'
];

new Autocompleter.Local('bands_from_the_70s',
 'band_list', bandsList, { });                  *
 
***CSS  *Styling the div and the returned ul is 

very important:
Applying a visual cue that an item is selected 

allows the user to take advantage of the keyboard 

 navigation of the dropdown and adding background 

 colors, borders, positioning, etc to the div 

(as the demo does) allows the user interface 

elements to stand out. The CSS from the demo 

applied to the examples would be:
div.autocomplete {
  margin:0px;  
  padding:0px;  
  width:250px;
  background:#fff;
  border:1px solid #888;
  position:absolute;
}div.autocomplete ul {
  margin:0px;
  padding:0px;
  list-style-type:none;
}div.autocomplete ul li.selected { 
  background-color:#ffb;
}div.autocomplete ul li {
  margin:0;
  padding:2px;
  height:32px;
  display:block;
  list-style-type:none;
  cursor:pointer;
}
 


*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&7