typeahead.js example

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/0.11.1/typeahead.bundle.min.js"></script>
<div id="remote" class="sm-calc-form">
    <form action="<?php bloginfo('siteurl'); ?>" name="myform2" method="get">
        <p>
            <input id="myfield" type="text" class="typeahead" placeholder="Название" name="s" />
        </p>
        <p>
            <input type="text" placeholder="Сумма" name="sum" />
        </p>
        <input type="text" id="postid" name="postid" />

        <input type="hidden" name="search_type" id="search_type" value="calc" />
        <p>
            <input id="fakesubmit" type="submit" name="submit" value="Рассчитать" />
        </p>
    </form>
</div>

JavaScript

var source = [{
    "ID": 1108,
    "post_title": "Mozo.ru"
}, {
    "ID": 1059,
    "post_title": "ZooZona"
}, {
    "ID": 591,
    "post_title": "Ozon.ru"
}, {
    "ID": 561,
    "post_title": "Ozon.travel"
}]


var suggestions = new Bloodhound({
    local: source,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('post_title'),
    identify: function(obj) {
        return obj.ID
    }
})

var field = $('#myfield')

field.typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    name: 'ID',
    highlight: true,
    displayKey: 'post_title',
    source: suggestions.ttAdapter(),
    templates: {
        suggestion: function(c) {
            return '<div><b>' + c.post_title + '</b> ' + c.ID + '</div>'
        }
    }
})

field.on('typeahead:select', function(e, selected) {
    $(this).data("ID", selected.ID);
})

$('#fakesubmit').on('click', function(e) {
    var datacode = field.data('ID');
    $("#postid").val(datacode);

    e.preventDefault()
})