Angular-UI自动完成输入框AutoComplete[项目中使用]

最新推荐文章于 2024-08-04 19:05:38 发布

谭正强

最新推荐文章于 2024-08-04 19:05:38 发布

阅读量7.5k

点赞数 1

分类专栏：前端合集

本文链接：https://blog.csdn.net/u010834071/article/details/48156421

版权

前端合集专栏收录该内容

43 篇文章 0 订阅

订阅专栏

一、效果展示

这里写图片描述

二、代码参考

【view视图】

<input id="countryCode" class="control-input" autocomplete="off" 
name="countryCode" type="text" 
data-ng-model="anomalieSearchPayId" 
placeholder="Saisir au moins 2 caractères" 
typeahead="country.countryCode+' - '+country.libellePay for country in getCountrys($viewValue)"
typeahead-loading="loadingCountrys" typeahead-append-to-body="false" typeahead-min-length="2"
ypeahead-template-url="countryTemplate.html" typeahead-editable="false" typeahead-on-select="onChangeCountrys($item, $model, $label)"
class="form-control" required="required" />
<i data-ng-show="loadingCountrys" class="glyphicon glyphicon-refresh"></i>&nbsp;

<script type="text/ng-template" id="countryTemplate.html">
<a tabindex="-1"><span  bind-html-unsafe="match.label | typeaheadHighlight:query"></span></a></script>

【控制器部分】

 $scope.getCountrys=function(searchText){
return CountryService.getCountrysBySearchText(searchText).$promise.then(function(data) {
                        return data;
                    });
                };

$scope.onChangeCountrys=function(item, model, label){
                    $scope.anomalieSearch.payId= item.countryCode;
                  };
$scope.$watch('anomalieSearchPayId',function (newValue, oldValue, scope){
                    if(!newValue){
                        $scope.anomalieSearch.payId="";
                    }
                });

【service部分】

define(['angular'], function (angular) {

    var CountryManagement = angular.module('CountryManagement', ['ui.bootstrap']);
    CountryManagement.factory('CountryService', [ '$resource', '$log', function ($resource, $log) {
        var Country = $resource('rest/countrys/:verb' , { verb:'@verb'}, {
        });
        return {
            allCountrys: function (state) {
                return Country.query({ 
                    state: state 
                    });
            },
            getMissionCountrys: function (externFamId) {
                    return Country.query({ 
                        verb:"getMissionCountrys",externFamId:externFamId
                    });    
            },
            getCountrysBySearchText: function (searchText) {
                return Country.query({ 
                    verb:"getCountrysBySearchText",
                    searchText: searchText 
                    });
            }
        };
    }]);

    CountryManagement.controller('CountryManagementController', ['$scope','$timeout', 'CountryService', '$location', function ($scope,$timeout, CountryService, $location) {

    }]);

    return {
        angularModules: [ 'CountryManagement' ]
    };
});

【后台逻辑】
1、访问入口

@GET
    @Path("/getCountrysBySearchText")
    @Produces(MediaType.APPLICATION_JSON)
    @RequiresPermissions(value = { "gedex:company:search", "gedex:company:create", "gedex:company:update", "gedex:trace:trace",
            "gedex:mission:create" }, logical = Logical.OR)
    public Response getCountrysBySearchText(@QueryParam("searchText") String searchText) {
        LOG.info("getCountrysBySearchText");
        List<CountryRepresentation> result = countryFinder.findCountrysBySearchText(searchText);
        return Response.ok(result).build();
    }

2、查询数据

   @Override
    public List<CountryRepresentation> findCountrysBySearchText(String searchText) {
        String whereSql = "";
        String strCondition = "";
        if (StringUtils.isNotEmpty(searchText)) {
            strCondition = "%" + searchText + "%";
            whereSql = "where (c.libellePay like :strCondition or c.entityId like :strCondition ) and c.state = 1";
        }
        /*
         * String sql = "select new " + CountryRepresentation.class.getName() +
         * "(c.entityId, c.libellePay, c.state, c.payCode2c, c.createDate,c.modifDate) from Country c " + whereSql + " order by c.entityId asc";
         * TypedQuery<CountryRepresentation> query = entityManager.createQuery(sql, CountryRepresentation.class);
         */
        String sql = "select c from Country c " + whereSql + " order by c.entityId asc";
        TypedQuery<Country> query = entityManager.createQuery(sql, Country.class);
        if (StringUtils.isNotEmpty(strCondition)) {
            query.setParameter("strCondition", strCondition);
        }
        List<Country> l = query.getResultList();
        List<CountryRepresentation> result = new ArrayList<CountryRepresentation>();
        for (Country country : l) {
            result.add(countryAssembler.assembleDtoFromAggregate(country));
        }
        return result;
    }