Question

Autocomplete inputs make life easier. However, I am working on a project where the customer insists on having ordinary inputs (radio buttons, checkbox groups and drop down selects). I don’t want to change sever-side code and plan to write a javascript function to create these form elements on the client side. I think the best approach is to give a plain textbox input a class and transform it with the function to the ultimate input type. But I don’t want to reinvent the wheel, so I thought I’d check if this has already been done. Google didn’t bring expected results, so I turn to SO, have you seen such function/plugin?

Answer 1

There is one now 😉 here is slightly modified jsfidle (because we don’t want to pull data from a real server). The code in a real application would be something like this:

Markup

Please choose the product:<br/>
<!-- not all products; only what we have on stock -->
<input type="text" id="product">

JS

$(document).ready(function() {

  $.getScript('available_products.php', function() {

    // we assume the server would return an array like this:
    // var products = ['33712:Product A', '12501:Product B', '14619:Product C'];

    var myoptions = '';
    $.each(
    products, function(n, p) {
        var pp = p.split(':');
        var i = pp[0];
        var v = pp[1];
        myoptions += '<option value="' + i + '">' + v + '</option>';
    });

    $('#product').replaceWith('<select id="product">' + myoptions + '</select>');

  });

});