Kukamilisha kiotomatiki kwenye JavaScript

Sasa tutatekeleza kukamilisha kiotomatiki. Neno hili linamaanisha onyo linalotoka chini wakati wa kuandika maandishi kwenye kiingizio. Hebu tuangalie kwa mfano. Hapa chini nimeunda kiingizio, ambacho unaweza kuandika jina la nchi. Wakati huo huo, ikiwa unaweza kuingiza herufi kadhaa, basi chini ya kiingizio orodha ya nchi zitakazoonekana, zinazoanza kwenye kamba iliyoingizwa.

Ikiwa unataka, ili usiandike jina la nchi kwa ukamilifu, bonyeza kwa kutumia kipanya kwenye nchi yoyote na itaonekana kwenye kiingizio. Kwa ujumla, hii ndiyo sababu kukamilisha kiotomatiki kinahitajika. Katika mfano kwa unyenyekevu nimeunda nchi tatu tu: Belarus, Belgium na Bulgaria. Andika kwenye kiingizio kilio hapa chini kwanza herufi 'B' ya Kiingereza, kisha 'e' na uangalie kitakachotokea:

Majadiliano

Hebu tujadiliane jinsi ya kutatua tatizo. Inahitajika kutengeneza safu yenye majina ya nchi. Kwangu ni kama hii:

javascriptlet arr  = ['Belarus', 'Belgium', 'Bulgaria'];

Wakati wa kuandika maandishi kwenye kiingizio, kwa kila uingizaji wa herufi inahitajika kupitia safu ya nchi na kupata nchi, zinazoanza kwenye kamba iliyoingizwa. Ni rahisi kufanya hivyo kwa kutumia mbinu filter na startsWith.

Kwa kutumia filter unaweza kupata safu ya nchi, zinazoanza na kamba iliyoingizwa. Kisha inahitajika kupitia safu hii kwa kitanzi na kujaza orodha ul kwa vitu vya orodha vilivyo na nchi. Na hivyo inahitajika kufanywa kwa kila uingizaji wa herufi, kwa kuchukua nafasi kuondoa kwenye orodha vitu vya orodha vilivyotengenezwa hapo awali.

Kwa urahisi wako, ninawasilisha muundo uliokamilika:

html<div id="parent">
  <input id="elem">
  <ul id="list"></ul>
</div>
text text text text text

css#parent {
  position: relative;
}
#elem {
  padding: 5px;
  font-size: 18px;
}

#parent ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: white;
}
#parent li {
  border: 1px solid gray;
  font-size: 18px;
  padding: 5px;
}
#parent li:hover {
  border: 1px solid black;
  cursor: pointer;
}