One interesting feature of my project is the search box that allows users to quickly find specific data in a populated div list sourced from the database. When a user types something into the search box, the corresponding data will be scrolled to on the list. Have a fantastic day!
If you would like to see the code in action, check out the JSFIDDLE.
I've made some modifications to this question and incorporated a script into my project. Unfortunately, I'm still experiencing issues with getting the scrolling functionality to work.
$(document).ready(function() {
$('.search-field').on('keyup blur change', function() {
var text_s = $(this).val();
$("li#dirlist").removeClass("highlight");
if (text_s.length > 0){
$("li#dirlist").each(function(){
var li_value = $(this).text();
if (li_value.indexOf(text_s) >= 0){
$(this).addClass("highlight");
var x = getOffset( document.getElementById(this.id) ).left;
}
});
}
});
});
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
window.scrollTo(_x,_y);
return { top: _y, left: _x };
}