Autocomplete
Autocomplete - angluarjs
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<script src="http://files.cnblogs.com/whitewolf/green-angular-plugin.js"></script>
<div ng-app="app" ng-controller="Test">
<div class="ui-widget">
<label for="tags">Tags(变量): </label>
<input id="tags" ng-model="val" green-autocomplete="" remote="false" ng-disabled="val=='Asp'" source="getsource" min-length="0" position-my="right top" position-at= "right bottom" start-with="false">
</div>
<br/>
{{val}}
<div class="ui-widget">
<label for="tags">Tags(函数): </label>
<input i ng-model="val_Array" green-autocomplete="" source="availableTags" max-items="5" min-length="2" start-with="true" ng-change="change();">
</div>
<br/>{{val_Array}}
http://XX/XX.php?term={0}
<div class="ui-widget">
<label for="tags">Tags(url): </label>
<input i ng-model="val_url" green-autocomplete="" source="url" remote="true" max-items="3" >
</div>
<br/>
{{val_url}}
</div>
JavaScript
;
var oldSuggest = jQuery.ui.autocomplete.prototype._suggest;
jQuery.ui.autocomplete.prototype._suggest = function(items) {
var itemsArray = items;
if (this.options.maxItems && this.options.maxItems > 0) {
itemsArray = items.slice(0, this.options.maxItems);
}
oldSuggest.call(this, itemsArray);
};
var autocomplete = function() {
var linkFun = function($scope, element, attrs) {
var $input = jQuery(element);
var responseDataSource = function($scope, source, pattern, response) {
var express = $scope[source];
var data = typeof(express) === "function" ? express(pattern, response) : express;
if (data) {
response(data);
}
};
var option = attrs;
//
option.position = {
my: attrs.positionMy,
at: attrs.positionAt,
};
var option = jQuery.extend({
position: {
my: "",
at: ""
},
close: function(event, ui) {
var express = attrs["ngModel"] + "='" + $input.val() + "'";
$scope.$apply(express);
$scope.$eval(attrs["ngChange"]);
}
}, option);
option.remote = option.remote === "true";
if (!option.remote) {
option.dataSource = attrs.source;
option.source = function(pattern, response) {
var option = $input.autocomplete("option");
var responseEx = function(data) {
var matches = jQuery.map(data, function(tag) {
var startWith = attrs.startWith === "true";
var index = tag.toUpperCase().indexOf(pattern.term.toUpperCase())
if ((startWith && index === 0) || (!startWith && index > -1)) {
return tag;
}
})
response(matches);
...