JavaScript - Browser - Forms and Form Fields(Autocompletion(jQuery), textarea)

Eloquent JavaScript

開発環境

• macOS High Sierra - Apple
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web browser)

Eloquent JavaScript, 2nd Ed.: A Modern Introduction to Programming(Marijn Haverbeke 著、No Starch Press)のPart 2(Browser)、Chapter 18(Forms and Form Fields)、Exercises(Autocompletion)を取り組んでみる。

Exercises(Autocompletion)

HTML5

<pre id="output0"></pre>
<textarea id="textarea0" value="JavaScript"></textarea>
<br>
<button id="run0">run</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script>
<script src="sample2.js"></script>

JavaScript

let pre0 = document.querySelector('#output0'),
    text0 = document.querySelector('#textarea0'),
    btn0 = document.querySelector('#run0'),
    p = (text) => pre0.textContent = text;


$('#textarea0').autoComplete({
    minChars: 2,
    source: (term, suggest) => {        
        let choices = ['JavaScript',
                       'ECMAScript',
                       'WebAssembly',
                       'HTML5',
                       'CSS'],
            matches = [];

        term = term.toLowerCase();
        for (let i=0, max = choices.length; i < max; i += 1) {
            if (~choices[i].toLowerCase().indexOf(term)) {
                matches.push(choices[i]);
            }
        }
        suggest(matches);
    }
});

btn0.onclick = () => {
    try {
        let f = new Function('', `return "${text0.value}"`);
        p(f());
    } catch (e) {
        p(e);
    }
};