Skip to content

Instantly share code, notes, and snippets.

@eb1

eb1/typeahead-contenteditable.html

Last active June 8, 2021 19:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eb1/39ed78cf52c6053fcb73 to your computer and use it in GitHub Desktop.
Save eb1/39ed78cf52c6053fcb73 to your computer and use it in GitHub Desktop.
Download ZIP
Basic code to get Typeahead to work with contenteditable divs. No hacking to typeahead.js required.
Raw
typeahead-contenteditable.html
<!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>
@eb1
Copy link
Author

eb1 commented Feb 25, 2016

Also note that if you're using typeahead with require.js, you'll need to add the following shim for it to work properly:

    typeahead: {
        deps: ['jquery'],
        init: function ($) {
            "use strict";
            // typeahead has a naming bug that conflicts with requirejs; 
            // workaround is from here: https://github.com/twitter/typeahead.js/issues/1211
            return require.s.contexts._.registry['typeahead.js'].factory($);
        }
    }

This shim is not required to test things out with the above Gist, however.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment