autocompletion ajax

L Franca Nova
http://lfnsea.appspot.com

Yes, Many Auto completion ajax library works. but sometimes it's hard to use for completed service use. There's always some, you want to MUST DO, almost of works has already done, but can not to be THE COMPLETE or arrive FULL SATISFACTION with all stuffs.

this tutorial all goes with JSON data form. I don't know how to convert lines or dom to json with jquery.
1 Manual Trigger
2 Display <-> To be inserted or Be searched
3 Not only text field, text area ok.

.ok. now this would be easiest. use code I modified.

you need
1 jquery.autocomplete.min.js
2 jquery.autocomplete.css
3 jquery-1.4.2.min.js
4 indicator.gif
5 your html file ( autocompletion.html for ex. )
download from the bottom green bar "attachments". put all in same folder

Codes I modified

jquery.autocomplete.min.js

original http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
infomation http://plugins.jquery.com/content/trigger-or-launch-search-dropdown-manually-document-ready-etc

like information, to trigger manually, I added those two parts.

,
    launchManual: function() {
        return this.trigger("launchManual");
	}
}
.bind("launchManual", function() {
        if( !cache.load( $input.val() ) )
        {
                cache.flush();
                cache.populate();
        }
        lastKeyPressCode = KEY.DOWN; // equivalent of 40 (down arrow)
        onChange(0, true);
	})

and for stop any general trigger, except manually pulled, I changed to this
onChange()

		if ( !skipPrevCheck || currentValue == previousValue )
			return;

the changement just those 2 characters && -> || . very hard to find out.

HTML part

autocompletion.html

		<link rel="stylesheet" type="text/css" href="/jquery.autocomplete.css" />
		<script type="text/javascript" src="/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="/jquery.autocomplete.min.js"></script>
		<script type="text/javascript">
	$(document).ready(function(){

		$('#textarea').autocomplete('/getlist',{ // I post ~/getlist url for retrieving json
			extraParams: {
					m: function() { return $('#m').val(); } // generally not needed 
			},
			dataType: 'json', // my case json
			matchContains: true,
			width:400,
			max:25,
			delay:0,
			cacheLength:0,
			multiple:true, // for text area. not one line component
			multipleSeparator:" ", // general word break, not "," or "'" like csv
			parse: function(data) {
        	        var parsed = [];
        		for (var i = 0; i < data.length; i++) {
            		parsed[parsed.length] = {
                	data:  data[i].hint, // json hint "Part A [ Part B ]". displayed
        	        value: data[i].key, // may be* searched by plugin
        	        result: data[i].result // to be inserted to the textarea
        	        };
        	    }
        	  return parsed;
    		},
    		formatItem: function(item) {
        		return item;
    		}
		}); 
	});
		</script>

Trig by "CTRL + ALT" like eclipse.

<textarea id="textarea"></textarea>
<script type="text/javascript">
$('#textarea').keypress(function(event){
	    if(event.metaKey && event.which == 32){
	    	event.metaKey=false; // important. I guess this param batters @ autocomplete.js
	    	$('#textarea').focus();
		$('#textarea').launchManual();
	    }
});
</script>

all done. thanks.

Still having some problems

  1. Cursor goes the last of the text area.
    last modified: 11 July 2011 [ View wiki source Close ]
     
SEARCH DIFFERENCE ATTACHMENT RECENT POST