JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/select2/select2.css">
<script src="http://vitalets.github.io/x-editable/assets/select2/select2.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<p>X-editable (dev)</p>
<div style="margin: 150px">
    <a href="#" id="username" data-value="2">found by ID</a>
</div>

JavaScript

$('#username').editable({
  type: 'select2',  
  url: '/post',    
  pk: 1,    
  onblur: 'submit',
  emptytext: 'None',
     select2: {
                placeholder: 'Select a Requester',
                allowClear: true,
                width: '230px',
                minimumInputLength: 3,
                id: function (e) {
                    return e.EmployeeId;
                },
                ajax: {
                    url: '/EmployeeSearch',
                    dataType: 'json',
                    data: function (term, page) {
                        return { query: term };
                    },
                    results: function (data, page) {
                        return { results: data };
                    }
                },
                formatResult: function (employee) {
                    return employee.EmployeeName;
                },
                formatSelection: function (employee) {
                    return employee.EmployeeName;
                },
                initSelection: function (element, callback) {
                    return $.get('/EmployeeLookupById', { query: element.val() }, function (data) {
                        callback(data);
                    }, 'json'); //added dataType
                }
            }
    /* suucess not needed
     ,
           success: function(response) {
                $('#RequestUser').text(response.newVal);
            }   
            */
});


$.mockjax({
    url: '/EmployeeLookupById',
    responseTime: 100,
    responseText: {
            EmployeeId: 1,
            EmployeeName: 'found by ID'            
        }
}); 

$.mockjax({
    url: '/EmployeeSearch',
    responseTime: 400,
    response: function(settings) {
        var res = [];
        for(var i=1; i<5;i++) {
            res.push({
                EmployeeId: i, 
                EmployeeName: settings.data.query+'_'+i
            });   
        }
        this.responseText = res;
    }
}); 

//ajax emulation. Type...