0

Is it possible to display dynamic texts contents inside an HTML input element, some thing similar to how chrome browsers CTRL + F works.

Like it shows the number of hits in the page.

Can anyone please help, if possible how or share some useful materials to achieve the same?

enter image description here

Roy
  • 503
  • 2
  • 8
  • 20
  • Please show your code! What you've tried! – Shashank Shah Feb 25 '16 at 05:19
  • yes you can do it, using css, jquery. – Murad Hasan Feb 25 '16 at 05:21
  • `Is it possible to display dynamic texts inside an HTML input element,` You mean highlight the matching content in an input value? – gurvinder372 Feb 25 '16 at 05:24
  • @gurvinder372 ... no I have edited the question, please see. – Roy Feb 25 '16 at 05:31
  • If I got your question right, do you mean HTML text highlight? like in this question: http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery – lastboy Feb 25 '16 at 06:30
  • @lastboy... no its not about highlighting... I have a table in which I i am implementing "Find" not search, and I have implemented the find and highlighting part already using html input element and JS. But, I wanted to know is it possible show the number of matched rows in the table inside the same search box(or the input element) along side the typed keywords which user would enter. – Roy Feb 25 '16 at 07:10
  • Everything is possible in HTML/Javascript env. But to help you we need to see how did you implemented it (use jsfiddle) Since it's really depends what kind of library/framework have you used jquery | angular | native javascript... – lastboy Feb 25 '16 at 07:31

1 Answers1

3

You can easily achieve this using a combination of relative and absolute positioning on the parent and child elements like this:

.field {
  position: relative;
  display: inline-block;
}
.field__input {
  padding-right: 40px;
}
.field__helper {
  position: absolute;
  right: 5px;
  top: 4px;
  color: #999;
  font-size: 12px;
}
/* this is just fluff to make it look nicer */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<div class="field">
  <input type="text" value="find" class="field__input">
  <span class="field__helper">1 of 5</span>
</div>

We use a relatively positioned parent (.fieldRow) to wrap around the input field. Then, we use a span (.helper) containing the text we want to display and using position: absolute; we can position it to the right of the input field. Last of all, we need a little padding on the right hand side of the input to stop the inputted value from bleeding into our helper text.

Chris Spittles
  • 15,023
  • 10
  • 61
  • 85