Last active
June 8, 2021 19:09
-
-
Save eb1/39ed78cf52c6053fcb73 to your computer and use it in GitHub Desktop.
Basic code to get Typeahead to work with contenteditable divs. No hacking to typeahead.js required.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Typeahead Contenteditable</title> | |
<meta name="author" content="Erik Brommers"> | |
<meta name="description" content="Test Typeahead with contenteditable div"> | |
</head> | |
<body> | |
<!-- depends on: | |
- jQuery (https://jquery.com/) - currently referencing v2.2.0. | |
- Typeahead (https://github.com/twitter/typeahead.js) | |
--> | |
<script src="jquery-2.2.0.js"></script> | |
<script src="typeahead.bundle.js"></script> | |
<script> | |
$(document).ready(function() { | |
// see https://github.com/twitter/typeahead.js/issues/235 for more details | |
var original = $.fn.val; | |
$.fn.val = function() { | |
if ($(this).is('*[contenteditable=true]')) { | |
return $.fn.html.apply(this, arguments); | |
}; | |
return original.apply(this, arguments); | |
}; | |
var substringMatcher = function(strs) { | |
return function findMatches(q, cb) { | |
var matches, substringRegex; | |
// an array that will be populated with substring matches | |
matches = []; | |
// regex used to determine if a string contains the substring `q` | |
substrRegex = new RegExp(q, 'i'); | |
// iterate through the pool of strings and for any string that | |
// contains the substring `q`, add it to the `matches` array | |
$.each(strs, function(i, str) { | |
if (substrRegex.test(str)) { | |
matches.push(str); | |
} | |
}); | |
cb(matches); | |
}; | |
}; | |
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', | |
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', | |
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', | |
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', | |
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', | |
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', | |
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', | |
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', | |
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' | |
]; | |
$('#the-basics .typeahead').typeahead({ | |
hint: true, | |
highlight: true, | |
minLength: 1 | |
}, | |
{ | |
name: 'states', | |
source: substringMatcher(states) | |
}); | |
}); | |
</script> | |
<div id="the-basics"> | |
<div>Enter a State name:</div> | |
<div class="typeahead" style="width: 6em; height: 1.2em; border:1px solid black;" contenteditable="true"></div> | |
</div> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Also note that if you're using typeahead with require.js, you'll need to add the following shim for it to work properly:
This shim is not required to test things out with the above Gist, however.