Member Avatar for ItecKid

Hello,

I have written a 'predictive text' widget using JavaScript/AJAX. When user enters a string of letters into form, the list of possible matches is displayed under the form. This works well and good, now I am trying to make it so that when the user clicks on a certain word, the form input filed is populated with that word. I have tried like this:

in my HTML file:

<form>
<input id="foo" type="text" />
</form>
<div id="bar" onClick="populate(this.value);">
</div>

And, in JavaScript, I have:

function populate (baz) {
document.getElementById('foo').innerHTML = word;
}

But this is not working. Any suggestions?

Edited by ItecKid because: n/a
  • 3 Contributors
  • 9 Replies
  • 746 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Taywin

Recommended Answers

All 9 Replies

Member Avatar for Will Gresham

To set the value of the textbox, use .value, not .innerHTML

Member Avatar for ItecKid

To set the value of the textbox, use .value, not .innerHTML

Hello,

Thanks very much for your reply. I have edited my code per your suggestion; but now when I click on any word in the div my textbox is filled with 'undefined'. Can I not use this.value to get the information from the div? I have tried wrapping each of the individual elements of the div in a <span> as well, this was also unsuccessful.

Member Avatar for Will Gresham

Try something like this:

<form>
<input id="foo" type="text" />
</form>
<div id="bar" onclick="populate(this);">
value for the div
</div>

JS:

function populate(el) {
document.getElementById('foo').value= document.getElementById(el.id).firstChild.nodeValue;
}
Member Avatar for ItecKid

Hello,

Thanks again for your help. Unfortunately, however, my div has multiple child elements, so always populating the box with the first child is not the intended effect. How can I make it so that the element that is clicked on is populated in the text box?

Thanks.

Member Avatar for Will Gresham

Add the onclick event to the element containing the text.

Member Avatar for Taywin

Your question is a bit unclear to me. You want to have clicking areas (div) and add the value into a text field? Anyway, the sample html page which includes everything is below. This is just a simple adding text from your 'onclick' to the 'text field' or 'text area' in a form.

<html>
<head>
<script type="text/javascript">
function populate (inElem) {
  var el = document.getElementById("foo")  // display in text box
  var el2 = document.getElementById("footxt")  // display in text area
  if (el) {  // in case 'foo' does not exist
    el.value += " " + inElem.innerHTML
  }
  if (el2) {
    el2.value += inElem.innerHTML+"\n"
  }
}
</script>

<body>
<form>
  <input id="foo" type="text" size=60 />
  <br />
  <textarea id="footxt" rows="10" cols="40"></textarea>
</form>

  <div id="bar1" onClick="populate(this);">
  Value1
  </div>

  <div id="bar2" onClick="populate(this);">
  Value2
  </div>

  <div id="bar3" onClick="populate(this);">
  Value3
  </div>

  <div id="bar4" onClick="populate(this);">
  Value4
  </div>

  <div id="bar5" onClick="populate(this);">
  Value5
  </div>
</div>
</body>
</html>
Member Avatar for ItecKid

Hello,

Apologies for my being unclear; I am writing predictive text application. As the user starts to type in the text field, a list possible words appears in the div; if the user clicks on one of those words; then that word is put into the text box. The problem with your solution is that I can not hard code a div for each word, because I do not know in advance how many words will be displayed, it is based on the search string the user enters.

Member Avatar for Taywin

I got it. There are many 'autocomplete' script in the public. You can look at http://www.javascript-examples.com/autocomplete-demo/ for some sample. If you really want to do it yourself, it would be a little bit difficult because you need to understand observer and search strategy from your own database (in this case it is a list of words).

Member Avatar for Taywin

I am not sure if you solve the problem by yourself or go to the link I gave you. By the way, it is not nice and unfair to give my post as negative while your question is unclear; thus, my answer is off the point.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.