Question

我正在尝试使用jQuery selectize库在下拉列表中添加过滤器选项，但其无法正常工作。我在下面提供我的代码。

<div class="col-md-6" style="margin-bottom: 15px;">
   <div class="input-group bmargindiv1 col-md-12">
     <span class="input-group-addon ndrftextwidth text-right oditek-form"
           style="width:180px">City Name :</span>
        <select class="form-control oditek-form" name="citycode1"
                id="citycode1" ng-model="citycode1"
                ng-options="result.name for result in listOfCity1 track by result.value ">
            <option value="">City</option>
        </select>
   </div>
</div>

    $scope.listOfCity1=[];
        //$scope.citycode=$scope.listOfCity[0];
        var url11='../service/admin/service/service.php?action=getAllCityData';
        var method='GET';
        var data11='';
        DataService.connectToServerSideScript(method,url11,data11)
        .then(function(response) {
            if (response.length >0) {
                angular.forEach(response,function(obj){
                    var cdata={'name':obj.city_name,'value':obj.id};
                    $scope.listOfCity1.push(cdata);
                })
            }
        },function(error) {

        })

这是我的下拉列表，它获取动态数据。在这里，我正在实现selectize.js库，如下所示。

<script src="js/selectize.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#citycode1').selectize();
 </script>

在这里，我的问题是，添加该库后，下拉列表字段在列表中未显示任何数据，并且字段宽度减小到非常小的大小。生成的输出HTML部分在下面给出。

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right oditek-form" style="width:180px">City Name :</span>
<select class="form-control oditek-form selectized ng-pristine ng-untouched ng-valid ng-empty" name="citycode1" id="citycode1" ng-model="citycode1" ng-options="result.name for result in listOfCity1 track by result.value " tabindex="-1" style="display: none;"><option value="" class="" selected="selected"></option><option label="Khordha" value="6">Khordha</option><option label="Puri" value="3">Puri</option><option label="Cuttack" value="2">Cuttack</option><option label="Bhubaneswar" value="1">Bhubaneswar</option></select><div class="selectize-control form-control oditek-form single"><div class="selectize-input items not-full"><input type="select-one" autocomplete="off" tabindex="" id="citycode1-selectized" placeholder="City" style="width: 25px;"></div><div class="selectize-dropdown single form-control oditek-form" style="display: none;"><div class="selectize-dropdown-content"></div></div></div>
</div>

在这里，我需要将用户键入文本后可以过滤的所有数据放入列表。

无法使用jQuery selectize和Angular.js添加客户过滤器选项

0 个答案: