Can I use JQuery autocomplete plugin in text area?_问答_开发者

Can I use JQuery autocomplete plugin in text area?

开发者 https://www.devze.com 2023-04-04 02:32 出处：网络

Can this开发者_StackOverflow中文版 autocomplete plugin, http://www.devbridge.com/projects/autocomplete/jquery/ be used to render data in textarea?I believe you can use that for a textarea as well.

Can this开发者_StackOverflow中文版 autocomplete plugin, http://www.devbridge.com/projects/autocomplete/jquery/ be used to render data in textarea?

I believe you can use that for a textarea as well.

All you need to do is to call the autocomplete method on the jQuery element of your textarea. For instance if your textarea element ID is foo, then you can call autocomplete with options like this:

var options = { 
    serviceUrl:'service/autocomplete.ashx',
    minChars:2, 
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:300,
    zIndex: 9999,
    deferRequestBy: 0, //miliseconds
    params: { country:'Yes' }, //aditional parameters
    noCache: false, //default is false, set to true to disable caching
    // callback function:
    onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
    // local autosugest options:
    lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values 
}
$('#foo').autocomplete(options);

You need to add a callback function onSelect method where you will render the data received from the server in to your textarea.

You can do it, this works. Needs some styling to look usable.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options, a;
jQuery(function(){
  options = { serviceUrl:'service/autocomplete.ashx' };
   var a = $('#query').autocomplete({ 
    minChars:1, 
    deferRequestBy: 0, //miliseconds
    params: { country:'Yes' }, //aditional parameters
    noCache: false, //default is false, set to true to disable caching
    // callback function:
    onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
    // local autosugest options:
    lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values 
  });
});

});
</script>
</head>
<body>
<textarea name="q" id="query" ></textarea>
</body>
</html>