The Javascript code shown below, changes the "class" attribute of an <li> element to "active" .
Code
function Typeahead (input, getOptions, selectOption) { // eslint-disable-line
var menuOptions = []
var menuIndex = -1
var _req
// Add Methods
function handleKeyDown (event) {
var maxIndex = menuOptions.length - 1
if (maxIndex < 0 || menuIndex < 0) return // Do not interfere if no menu
switch (event.which) {
case 40: // down
event.preventDefault()
menuIndex++
if (menuIndex > maxIndex) { menuIndex = maxIndex }
updateActiveInMenu()
break
case 38: // up
event.preventDefault()
menuIndex--
if (menuIndex < 0) { menuIndex = maxIndex }
updateActiveInMenu()
break
case 9: // tab
case 13: // enter
event.preventDefault()
handleOptionSelect(menuIndex)
break
case 27: // esc
event.preventDefault()
resetMenu()
break
}
}
function handleInput (event) {
var onGettingOptions = function (options) {
// parse to json if string
if (typeof options === 'string') { options = JSON.parse(options) }
// Replace options in menu
menuOptions = options
menuIndex = 0
var newMenu = getNewMenu()
var parent = menu.parentNode
parent.replaceChild(newMenu, menu)
menu = newMenu
}
if (_req) { _req.abort() }
_req = getOptions(event.target.value, onGettingOptions)
}
function handleOptionSelect (index) {
menuIndex = index
updateActiveInMenu()
selectOption(menuOptions, menuIndex)
resetMenu()
}
function handleBlur (event) {
setTimeout(function () {
resetMenu()
}, 200)
}
function updateActiveInMenu () {
var lis = menu.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
lis[i].className = menuIndex === i ? 'active' : ''
}
}
function getNewMenu () {
var menu = document.createElement('ul')
menu.className = 'dropdown'
for (var i = 0; i < menuOptions.length; i++) {
(function () {
var index = i
var li = document.createElement('li')
li.innerHTML = menuOptions[i].name
if (index === menuIndex) { li.className = 'active' }
li.addEventListener('mousedown', function () { handleOptionSelect(index) })
menu.appendChild(li)
})()
}
return menu
}
function resetMenu () {
menuIndex = -1
menuOptions = []
menu.className = 'hidden'
}
// make the parent position default relative to set dropdown position
input.style.marginBottom = 0
var parent = input.parentNode
parent.style.position = 'relative'
// Add Menu
var menu = getNewMenu()
parent.appendChild(menu)
// Add listeners
input.addEventListener('keydown', handleKeyDown)
input.addEventListener('input', handleInput)
input.addEventListener('blur', handleBlur)
}
Display More
Before Javascript execution, the <ul> doesnt contain any <li> :
After Javascript execution, a dropdown list of <li> elements is added to the <ul>, which can be seen below :
Code
<ul class="hidden">
[COLOR=#006400][B] <li class="active">Graphite India Ltd</li>
<li>Graphite India Ltd (Merged)</li>[/B][/COLOR]
</ul>
<li> elements are referenced using a IHTMLElementCollection, like so :
Code
Dim SearchElement As[B] IHTMLElementCollection[/B]
Dim Element As Object
Set SearchElement = HUrl.getElementsByClassName("ul").Item(0).getElementsByTagName("li")
For Each Element in SearchElement
If Element.hasAttribute("class") Then
Debug.Print "Element : " & Element.innerText
Question : How to add an [B]event listener [/B]when [B]LEFT CLICK[/B] is pressed on a [B]MOUSE?[/B]
Else
Application.SendKeys "%{F4}", True
End If
Next
Display More