billcreswell · February 8, 2014 12:20
diff --git a/MTAutoComplete.html b/MTAutoComplete.html
 <!doctype html>
 <head>
    <style>
        body {font-size:1em; font-family:Droid Sans,Verdana,Helvetica,sans-serif;}
        
        .iwrap { float:left;padding:2px}
        .iwrap label {display:block;font-weight:bold;}
        .iwrap.border { border:1px #eee solid;padding:2px;margin:4px}
        .iwrap.border label {text-align:center}
        
        .hidden { display:none}
    </style>
    
    <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>


    <script>
    /**
     * @brief Search and return ids and names
     * @param url str (data url)
     * @param string str (search string)
     * @param object select (id of select target)
     * @return html (options for select)
     * 
     * @todo Make a reset to original value
     */
        var IV5 = {};
        IV5.searchForAutoComplete = function(url, str, select)
        {
            if (str.length < 3) return false;
            
            select = $(select);                         // select elemen
            selectId = $(select).get('id');             // select element id
            searchSelect = select.getPrevious('input'); // search element
            searchDiv = select.getParent('div');        // container
            
            searchDiv.style.position = 'relative';      
            searchSelect.setAttribute("autocomplete","off");
            
            select.empty();
            select.adopt(new Element('option',{'value':'-'}).set('text', 'Searching...'));
            select.removeClass('hidden');
            select.style.position = 'absolute';
            select.style.top = '3em';
            select.style.left = '0px';
            select.style.width = '10em;';
         
            
            new Request.JSON({
                'url': url, 
                'secure': false, 
                'data': {'search': str}, 
                'onComplete': function(rs){
                    if (!rs.success) alert(rs.message); 
                    else {
                    // add the options
                        if (rs.options.length > 0){
                           
                            select.empty();
                            select.removeClass('hidden');
                            select.set('size',5);
                           
                            select.adopt(new Element(
                                'option',{'value':'-'})
                                .set('text', 'Select...'));
                                
                            rs.options.each(function(o, i){
                                select.adopt(new Element('option',{'value':o.id})
                                    .set('text',o.name))
                                    .addEvent('click', function() {
                                        if(select.selectedIndex 
                                            && select.selectedIndex.value!="-") 
                                        {
                                            cleanText = select.options[select.selectedIndex].text;
                                            cleanText.replace(/[^a-zA-Z0-9]/, '-', cleanText);
                                            select.getPrevious('input').value = cleanText;
                                            
                                        // build eraser
                                            if(!$(selectId+'clear')) {
                                                eraser = new Element('button',{
                                                        'id':select.id+'clear',
                                                        'title':'x',
                                                        'text':'x'
                                                }).addEvent('click',function() {
                                                        select.selectedIndex=0;
                                                        select.getPrevious('input').value = "";
                                                    });
                                               
                                                searchDiv.insertBefore(eraser,select);
                                            }
                                            select.addClass('hidden');
                                        }
                                    });
                            });
                            //select.focus();
                        } 
                    }
                }
            }).send();
        }
    </script>
 </head>

 <body>
    <h1>MTAutoComplete</h1>
    <form id="NewForm">
        <div class="iwrap">
            <label for="SearchOwner">Search Owners (if not you)</label>
                <input id="SearchOwner" name="owner_search" size="35" 
                    autocomplete="off"
                    onkeyup="IV5.searchForAutoComplete(
                        '/MTAutoComplete.json', 
                        $('NewForm').owner_search.value, 
                        $('NewForm').owner);" />
                        <select name="owner"id="NewTaskFormOwner" class="hidden"></select>
           
                </div>
    </form>
 </body>
 </html>
diff --git a/MTAutoComplete.json b/MTAutoComplete.json
 {'success': true, 'options': [
    {"id":"11","name":"Adams, Wendy"},
    {"id":"16","name":"Creswell, William"}
   ]
 }
	<!doctype html>
	<head>
	<style>
	body {font-size:1em; font-family:Droid Sans,Verdana,Helvetica,sans-serif;}

	.iwrap { float:left;padding:2px}
	.iwrap label {display:block;font-weight:bold;}
	.iwrap.border { border:1px #eee solid;padding:2px;margin:4px}
	.iwrap.border label {text-align:center}

	.hidden { display:none}
	</style>

	<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>


	<script>
	/**
	* @brief Search and return ids and names
	* @param url str (data url)
	* @param string str (search string)
	* @param object select (id of select target)
	* @return html (options for select)
	*
	* @todo Make a reset to original value
	*/
	var IV5 = {};
	IV5.searchForAutoComplete = function(url, str, select)
	{
	if (str.length < 3) return false;

	select = $(select); // select elemen
	selectId = $(select).get('id'); // select element id
	searchSelect = select.getPrevious('input'); // search element
	searchDiv = select.getParent('div'); // container

	searchDiv.style.position = 'relative';
	searchSelect.setAttribute("autocomplete","off");

	select.empty();
	select.adopt(new Element('option',{'value':'-'}).set('text', 'Searching...'));
	select.removeClass('hidden');
	select.style.position = 'absolute';
	select.style.top = '3em';
	select.style.left = '0px';
	select.style.width = '10em;';


	new Request.JSON({
	'url': url,
	'secure': false,
	'data': {'search': str},
	'onComplete': function(rs){
	if (!rs.success) alert(rs.message);
	else {
	// add the options
	if (rs.options.length > 0){

	select.empty();
	select.removeClass('hidden');
	select.set('size',5);

	select.adopt(new Element(
	'option',{'value':'-'})
	.set('text', 'Select...'));

	rs.options.each(function(o, i){
	select.adopt(new Element('option',{'value':o.id})
	.set('text',o.name))
	.addEvent('click', function() {
	if(select.selectedIndex
	&& select.selectedIndex.value!="-")
	{
	cleanText = select.options[select.selectedIndex].text;
	cleanText.replace(/[^a-zA-Z0-9]/, '-', cleanText);
	select.getPrevious('input').value = cleanText;

	// build eraser
	if(!$(selectId+'clear')) {
	eraser = new Element('button',{
	'id':select.id+'clear',
	'title':'x',
	'text':'x'
	}).addEvent('click',function() {
	select.selectedIndex=0;
	select.getPrevious('input').value = "";
	});

	searchDiv.insertBefore(eraser,select);
	}
	select.addClass('hidden');
	}
	});
	});
	//select.focus();
	}
	}
	}
	}).send();
	}
	</script>
	</head>

	<body>
	<h1>MTAutoComplete</h1>
	<form id="NewForm">
	<div class="iwrap">
	<label for="SearchOwner">Search Owners (if not you)</label>
	<input id="SearchOwner" name="owner_search" size="35"
	autocomplete="off"
	onkeyup="IV5.searchForAutoComplete(
	'/MTAutoComplete.json',
	$('NewForm').owner_search.value,
	$('NewForm').owner);" />
	<select name="owner"id="NewTaskFormOwner" class="hidden"></select>

	</div>
	</form>
	</body>
	</html>
	{'success': true, 'options': [
	{"id":"11","name":"Adams, Wendy"},
	{"id":"16","name":"Creswell, William"}
	]
	}