ఆటోకంప్లీట్ సృష్టించడానికి ఎలా చేయాలి

ఆటోకంప్లీట్ ఫీచర్ సృష్టించండి ఎలా నేర్చుకోండి.

ఆటోకంప్లీట్ ఫారమ్ సృష్టించండి

మొదటి చర్య - హెచ్చి కొడించండి:

<!-- ఫారమ్ ఆటోకంప్లీట్ అప్ క్లోజర్ చేయండి: -->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

రెండవ చర్య - జావాస్క్రిప్ట్ కోట్లు సృష్టించండి:

ప్రపంచంలోని అన్ని దేశాలు/ప్రాంతాలను కలిగివున్న అర్థం కోట్లు:

var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","కోస్టా రికా, కోట్ డి ఇవోయిర్, క్రోయేశియా, క్యూబా, క్యూరాకౌ, సైప్రస్, చెక్ రిపబ్లిక్, డెన్మార్క్, జిబౌటి, డొమినికా, డొమినికన్ రిపబ్లిక్, ఇక్వడోర్, ఈజిప్ట్, ఎల్ సాల్వాడర్, ఈక్వటోరియల్ గ్వినీయా, ఎరిత్రియా, ఎస్టోనియా, ఇథియోపియా, ఫాల్క్లండ్ దీవులు, ఫారో దీవులు, ఫిజీ, ఫిన్లాండ్, ఫ్రాన్స్, ఫ్రెంచ్ పోలినేషియా, ఫ్రెంచ్ వెస్ట్ ఇండీస్, గబాన్, గమ్బియా, జోర్జియా, జెర్మనీ, ఘానా, గిబ్రాల్టర్, గ్రీస్, గ్రీన్లాండ్, గ్రెనాడా, గుయామ్, గ్వాటెమాలా, గ్వ�్న్సీ, గ్వీనీయా, గ్వీనీయా బిస్సావు, గుయానా, హెయిటి, హోండురాస్, హాంగ్ కాంగ్, హంగరీ, ఐస్ల్యాండ్, ఇండియా,ఇండోనేశియా, ఇరాన్, ఇరాక్, ఐర్లాండ్, ఐల్ ఆఫ్ మ్యాన్, ఇజ్రాయెల్, ఇటలీ, జమైకా, జపాన్, జర్సీ, జోర్దాన్, కజాఖ్స్తాన్, కెన్యా, కిరిబాటి, కొసోవో, కువైత్, కిర్గిస్తాన్, లావోస్, లత్వియా, లెబనాన్, లెసొతో, లీబీరియా, లిబియా, లిచెన్స్టైన్, లిథువేనియా, లక్జంబర్గ్, మకావో, మాక్డోనియా, మడగాస్కర్, మలావీ, మలేశియా, మాల్దీవ్స్, మాలి, మాల్టా, మర్షల్ దీవులు, మౌరిటానియా, మౌరిటియస్, మెక్సికో, మיוక్రోనేశియా, మొల్దోవా, మొనాకో, మంగోలియా, మొంటెనెగ్రో, మాంట్సెరాట్, మొరాకో, మొజాంబిక్, మьянమార్, నామీబియా, నారూనేపాల్, నెదర్లాండ్స్, నెదర్లాండ్స్ అంటిలెస్, న్యూ కేడోనియా, న్యూ జీలాండ్, నికారాగ్వా, నైజీరియా, ఉత్తర కొరియా, నార్వే, ఓమాన్, పాకిస్తాన్, పాలావు, పలేస్టైన్, పనమా, పాపుయా న్యూ గుయ్నీయా, పరాగ్వే, పెరు, ఫిలిప్పీన్స్, పోలండ్, పోర్చుగల్, పుర్టో రికో, కతర్, రెయనన్, రోమేనియా, రష్యా, రువాండా, సెయింట్ పియర్ & మికెలాన్, సమోయా, సాన్ మరినో, సావో తోమే అండ్ ప్రిన్సిపీ, సౌదీ అరేబియా, సెనెగల్, సెర్బియా, సెయిచెల్స్, సియెరా లియోన్, సింగపూర్, స్లోవేకియా, స్లోవేనియా, సోలోమన్ ద్వీపాలు, సోమాలియా, దక్షిణ ఆఫ్రికా, దక్షిణ కొరియా, దక్షిణ సూడాన్స్పెయిన్,"శ్రీలంకా","స్ట్ కిట్స్ & నెవిస్","స్ట్ లుసియా","స్ట్ వింసెంట్","సూడాన్","సురినామ్","స్వాజిలాండ్","స్వీడన్","స్విట్జర్లాండ్","సిరియా","తాయ్వాన్","తజికిస్తాన్","తాన్జానియా","థాయ్లాండ్","టిమోర్ లెస్ట్","టోగో","టోంగా","ట్రినిడాడ్ & టొబాగో","తునీషియా","తుర్కీ","తుర్క్మెనిస్తాన్","టర్క్స్ & కైకోస్","టువాలు","యుగాండా","యూక్రేన్","యునైటెడ్ అరబ్ ఎమిరేట్స్","యునైటెడ్ కింగ్డం","యునైటెడ్ స్టేట్స్ ఆఫ్ అమెరికా","ఉరుగ్వే","ఉజ్బెకిస్తాన్","వానువాటూ","వటికన్ సిటీ","వెనెజ్వేలా","వియత్నాం","వరిజిన్ ఐలాండ్స్ (US)","యెమెన్","జమ్బీయా","జింబాబ్వే"];

మూడవ అడుగు - సిఎస్ఎస్ జోడించండి：

కంటైనర్ అవశ్యంగా 'రెలేటివ్' పోసిషనింగ్ కలిగిఉండాలి。

* { box-sizing: border-box; }
body {
  ఫాంట్: 16px Arial;
}
.autocomplete {
  /* కంటైనర్ ముసాయిదాలను రెలేటివ్ పోసిషనింగ్ చేయండి: */
  పోసిషన్: రెలేటివ్;
  డిస్ప్లే: ఇన్లైన్-బ్లాక్;
}
input {
  బార్డర్: 1px సోలిడ్ ట్రాన్స్పారెంట్;
  బ్యాక్గ్రౌండ్-కలర్: #f1f1f1;
  padding: 10px;
  ఫాంట్-సైజ్: 16px;
}
input[type=text] {
  బ్యాక్గ్రౌండ్-కలర్: #f1f1f1;
  విస్తృతి: 100%;
}
input[type=submit] {
  బ్యాక్గ్రౌండ్-కలర్: DodgerBlue;
  రంగు: #fff;
}
.autocomplete-items {
  పోసిషన్: అబ్సోల్యూట్;
  బార్డర్: 1px సోలిడ్ #d4d4d4;
  బార్డర్-బోటమ్: none;
  బార్డర్-టాప్: none;
  జి-ఇండెక్స్: 99;
  /* కంటైనర్ తో సమానంగా ఆటోమేటిక్ పూర్తి అనున్ని స్థానించండి: */
  పైకి: 100%;
  ఎడమ: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* పరిమితి కీబోర్డు స్కీములపై మౌస్ హోవర్ అయినప్పుడు: */
  background-color: #e9e9e9;
}
.autocomplete-active {
  /* పరిమితి కీబోర్డు స్కీములను అన్వేషించగలిగినప్పుడు:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

నాలుగవ దశ - జావాస్క్రిప్ట్ను జతచేయుట:

function autocomplete(inp, arr) {
  /* స్వయంచాలక క్రియాశక్తికి రెండు పరామితులు అవసరమవుతాయి, ఒకటి ఫీల్డ్ ఎలమెంట్గా మరొకటి స్వయంచాలక విలువల జాబితాగా: */
  var currentFocus;
  /* పదం ఫీల్డ్లో రాయబడినప్పుడు నిర్వహించే క్రియాశక్తి: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* తప్పుగా తెరిచిన స్వయంచాలక విలువల జాబితాను మూసివేయుట */
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /* అంశాలు (విలువలను) కలిగించే ఒక డివ్ ఎలమెంట్ను సృష్టించుట: */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* ఈ DIV ఎలమెంట్ను స్వయంచాలక అక్కడ కుడివాని ఎలమెంట్గా జతచేయుట:*/
      this.parentNode.appendChild(a);
      /* ప్రయోగం లోని ప్రతి అంశం పైగా ప్రయాణించుట... */
      for (i = 0; i < arr.length; i++) {
        /* ప్రయోగం విధమైన పదం మొదటి అక్షరం ముగించే క్రియాశక్తిని తప్పించుట: */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* ప్రతి మ్యాచ్ అంశానికి ఒక డివ్ ఎలమెంట్ సృష్టించండి: */
          b = document.createElement("DIV");
          /* మ్యాచ్ విలువను బోల్డ్ చేయండి: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* ప్రస్తుత సరణి విలువను సేవ్ చేయడానికి ఒక ఇన్పుట్ ఫీల్డ్ ప్రవేశపెట్టండి: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* ప్రాజెక్ట్ విలువను క్లిక్ చేసినప్పుడు ఫంక్షన్ అమలు చేయండి: */
              b.addEventListener("click", function(e) {
              /* ఆటోకమ్ప్లెట్ టెక్స్ట్ ఫీల్డ్ యొక్క విలువను ప్రవేశపెట్టండి: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* ఆటోకమ్ప్లెట్ విలువల జాబితాను లేదా ఏదైనా తెరిచిన ఆటోకమ్ప్లెట్ విలువల జాబితాను మూసివేయండి: */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* కీబోర్డ్లో కీను నొక్కినప్పుడు ఫంక్షన్ అమలు చేయండి: */
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*క్రింది ఆర్కుడ్ కీను నొక్కినప్పుడు, currentFocus మార్పుని పెంచండి: */
        currentFocus++;
        /* ప్రస్తుత ప్రాజెక్ట్ మరింత స్పష్టంగా చేయండి: */
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /* ఎగువ ఆర్కుడ్ కీను నొక్కినప్పుడు, currentFocus మార్పుని తగ్గించండి: */
        currentFocus--;
        /* ప్రస్తుత ప్రాజెక్ట్ మరింత స్పష్టంగా చేయండి: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* నుంచి ENTER కీను నొక్కినప్పుడు, ఫార్మ్ సబ్మిట్ నిరోధించండి: */
        e.preventDefault();
        if (currentFocus > -1) {
          /* చురుకుగా అంశంపై క్లిక్ చేయండి: */
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* అంశాలను "చురుకుగా" వర్గీకరించే ఫంక్షన్: */
    if (!x) return false;
    /* అన్ని అంశాలలో "active" క్లాస్ తొలగించండి: */
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /* "autocomplete-active" క్లాస్ జోడించే ఫంక్షన్: */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* అన్ని ఆటోకమ్ప్లెట్ అంశాలను "active" క్లాస్ నుండి తొలగించే ఫంక్షన్: */
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /* పారామిటర్గా పాస్ చేసిన దాని కంటే పొలిగిన అన్ని ఆటోకమ్ప్లెట్ జాబితాలను మూసివేయండి: */
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
      x[i].parentNode.removeChild(x[i]);
    }
  }
}
/* డాక్యుమెంట్లో ఎవరైనా క్లిక్ చేసినప్పుడు అమల్లోకి వెళ్ళే ఫంక్షన్ */
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}

ఐదవ చర్య - "myInput" పైన ఆటోకమ్ప్లెట్ ఫంక్షన్ చేతనం చేయండి:

దేశాల జాబితాను ఆయామంగా చేయండి: autocomplete ఫంక్షన్ యొక్క రెండవ పారామిటర్ పాస్ చేయండి:

<script>
autocomplete(document.getElementById("myInput"), countries);

亲自试一试