Comment définir onClick valeur sélectionnée dans la zone de saisie à l'aide de simples Java script

J'ai div, qui a une zone de saisie et génère des valeurs dans <ol><li> grâce à ajax, maintenant, je voulais sélectionnez l'une des valeurs de <li> et que la zone de saisie à l'aide de javascript simple.

<div id="abc">
     <input type="text" name="inputbox" id="inputboxID" class="inptBx"/>
     <ol>
    <li id="1">sam</li>
    <li id="2">joe</li>
    <li id="3">dan</li>
    <li id="4">tom</li>
    <li id="5">dick</li>
</ol>
</div>

Exemple : j'ai un div "abc", qui a une inputbox, si je recherche quelque chose dans ce que je reçois suite à <ol><li></li></ol> balises(liste déroulante) grâce à ajax, Maintenant, si je clique sur "tom", j'ai envie de définir cette valeur dans mon inputbox.

S'il vous plaît suggérer une solution d'activer javascript pour cela.

Merci d'avance

  • Si vous utilisez jQuery, vous pouvez facilement utiliser ce $("#abc li").click(function() { $("#inputboxID").val($(this).text()); }); Voici un lien avec ce script en action: ws10.dns.multinet.se/test/geotest.php
InformationsquelleAutor Swapnil R. | 2011-12-08
  1. 2
    <script type="text/javascript">
function display(inPut)
{
var t=document.getElementById("inputboxID");
t.value = inPut;
}
</script>

<div id="abc">
      <input type="text" name="inputbox" id="inputboxID" class="inptBx"/>
 <ol>
     <li id="1" onClick="javascript:display(this.innerText)">sam</li>
     <li id="2" onClick="javascript:display(this.innerText)">joe</li>
     <li id="3" onClick="javascript:display(this.innerText)">dan</li>
     <li id="4" onClick="javascript:display(this.innerText)">tom</li>
     <li id="5" onClick="javascript:display(this.innerText)">dick</li>
 </ol> 
</div>
    • oui cela fonctionne, vous pouvez utiliser ce code
    • <html><head> <script type="text/javascript"> function display(inPut){ var t=document.getElementById("inputboxID"); t.value = inPut; } </script> </head> <body> <div id="abc"> <form id="form1"> <input type="text" name="inputbox" id="inputboxID" class="inptBx"/> <ol> <li id="1" onClick="javascript:display(this.innerText)">sam</li> <li id="2" onClick="javascript:display(this.innerText)">joe</li> <li id="3" onClick="javascript:display(this.innerText)">dan</li> </ol> </form> </div> </body> </html> Sa ne fonctionne pas, s'il vous Plaît suggérer..
    • cela ne fonctionne pas dans firefox ou chrome. this.innerText returns undefined in firefox and chrome
    • Je vous suggère d'utiliser jQuery
    InformationsquelleAutor Albert Tsang
  2. 1

    construire le HTML comme ceci lors du chargement des résultats de recherche en div

    <li id="4" onclick='$("#inputboxID").val(this.innerText)' >tom</li>
    InformationsquelleAutor Selvakumar Ponnusamy
  3. 1

    Si vous utilisez jQuery, vous pouvez utiliser cet extrait.

    <script type="text/javascript">
$("#abc li").click(function() { $("#inputboxID").val($(this).text()); });
</script>
    InformationsquelleAutor NoLifeKing
  4. 1
    for (var i = 1; i < 6; i++)
    document.getElementById(i).addEventListener('click', loadText);

function loadText() {
    document.getElementById('inputboxID').value = this.innerHTML || this.innerText;
}

    Aussi, assurez-vous de corriger les erreurs dans votre balisage HTML:

    <li id="3">dan</li>
<li id="4">tom</li>

    Vous avez été absent de la " après les 3 et 4

    3 façons d'inclure le script dans votre page de sorte qu'il s'exécute correctement:

    • http://jsfiddle.net/NmDW9/3/ - Wrap javascript dans la tête dans une fonction principale, puis appeler la fonction principale à la fin de HTML.
    • http://jsfiddle.net/NmDW9/6/ - Inclure tous les javascript à la fin de la <body>
    • http://jsfiddle.net/NmDW9/7/ De référence externe .fichier js à la fin de la <body>
      • pourquoi vous compliquer les choses il suffit d'ajouter une classe sur li ou $("#abc ul li").cliquez sur(function(){ $("#inputboxID").val(ce.text());});
      • Il veut une solution javascript, pas jQuery... et je ne suis pas sûr s'il veut maintenir son code HTML est exactement comme
      • Cela a fonctionné pour moi 🙂 Merci Cory
      • pas de problème, j'ai juste édité le post, un court-circuit un peu le code. le loadtext fonction est maintenant de 1 plus ligne au lieu de 3
      • Il semble que lorsque je ajouter à ma page sa ne fonctionne pas 🙁 ci-Dessous mon script en lui-même maintenant -<script type="text/javascript" language="JavaScript"> window.onload = function addSearchText() { document.getElementById("searchterms").value = 'Entrez un Terme de Recherche ou Partie #'; } function removeSearchText() { document.getElementById("searchterms").valeur =""; } for (var i = 1; i < 6; i++) document.getElementById(i).la méthode addEventListener('click', loadText); la fonction loadText() { document.getElementById ("inputboxID').valeur = ce.innerHTML || ce.innerText; } </script>
      • Également Dans le Corps de la balise <form > <input type="text" name="searchTerms" id="searchterms" class="inptBx" onfocus="removeSearchText();"/> <html:image pageKey="img.commun.catalogsearch_button" styleClass="btnGo" /> <div id="SuggestionListDiv"></div> </form> Sur la recherche de quelque chose dans la zone de saisie, il génère des valeurs dans la balise li comme mentionné ci-dessus. S'il vous plaît suggérer maintenant
      • Vous devez inclure le code javascript après le HTML. Juste avant la </body> balise est où vous devez mettre votre code javascript.
      • Si vous ne voulez pas le faire pour quelque raison que ce soit, et facile façon de contourner cela est d'envelopper l'ensemble de votre code javascript dans une fonction, et puis d'inclure une balise de script en bas de votre code d'appeler cette fonction, ou d'écrire le code javascript dans un fichier externe et d'utiliser la balise de script pour importer le fichier.

    InformationsquelleAutor Cory Danielson