Is there an ajax `select`?

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 开发者_StackOverflow中文版I turn to SO, have you seen such function/plugin?

If I'm understanding your question correctly, you want to serve a form with a bunch of text inputs, then transform it on the client to other forms of inputs (checkboxes, etc)? Not sure I really understand the motivation for this (it'd be easier to just serve up a form that matches what the customer wants, I think), but you should be able to do that using replaceWith or the related functions.

It does seem like something's missing from your description here, though - you'll need to edit the server-side to put a class on each input anyway, so why not just change the type there instead?

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>');

  });

});