Requirements: None, just javascript but good knowledge of that.
Using:
file.html
Using:
file.html
- <html>
- <body>
- <input type="text" id="notrequired" onKeyUp="hint(this)" />
- <div id="hintwords"></div>
- </body>
- <script type="text/javascript">
- function hint(me)
- {
- var arr = new Array('test','it','will','work');
- var iter = 0;
- var mat = new Array();
- var len = me.value.length;
- if(len>0)
- {
- for(iter=0 ; iter < arr.length; iter++)
- {
- var val = me.value;
- //alert(val);
- var patt = new RegExp( val ,'gi');
- var result = patt.exec(arr[iter]);
- if(result == val)
- {
- //alert(arr[iter]);
- mat.push(arr[iter]);
- }
- }
- //alert(mat[0]);
- var str = '';
- for(iter = 0; iter < mat.length ; iter++)
- {
- if(str == '')
- {
- str = str + mat[iter]
- }
- else
- {
- str = str + ',' + mat[iter]
- }
- }
- document.getElementById('hintwords').innerHTML = str;
- }
- else
- {
- document.getElementById('hintwords').innerHTML = '';
- }
- }
- </script>
- </html>
Explanation:
I will be explaining just the lines that are important and needed to be explain.
9. array is created of the words that are needed to be hinted.
13. checking if the length of value of text in textbox is greater than 0.
15. looping on the length of the array of words.
20. making a regular expression using of the value of textbox. Here the regex generated will be the same as the value of textbox.
21. checking for the match using exec() of regex.
26. if there is match then the word that is from the array of word is pushed into new array mat.
35. if the str has no value then this line is exceuted and string is concatenated to str.
39. else this line concatenated to str.
42. is just writing the str in the div hintwords.
46. if the textbox has no value or empty then no hint is shown
No comments:
Post a Comment
Thank you for your comment!