Question

我正在尝试为角度js中的输入文本字段实现自动建议框。我使用了以下小提琴http://jsfiddle.net/sebmade/swfjT/light/

中的引用

我所尝试的是在前端。

<input type="text" auto-complete ui-items="suggestionPhrase"  id="ingredients" ng-model="searchString" ng-change="callSuggestion()" ng-enter="getRecipesTracknPlan()" placeholder="Type of ingredients / recipe">

并且js文件是

var app = angular.module('tracknplanApp', ['checklist-model','ui.bootstrap','ui.utils']);`enter code here`app.config(['$locationProvider',
function ($locationProvider)
{
    $locationProvider.html5Mode(true); }]);

app.controller('tracknplanctrl', function ($scope, $http, $location, searchStringSelected, $modal, $filter) {
console.log("Running Track n plan controller.");
/*angular.element('#recipeNVariantTabs').removeClass('hidden-xs');
angular.element('#recipeNVariantTabs').removeClass('hidden-sm');*/
$scope.showVariants = false;
var trackNPlanDate = new Date();
var foodSearchDate = new Date();
var activitySearchDate = new Date();
$scope.callSuggestion= function(){

     if ($scope.searchString){
       console.log("inside initializeFoodSuggestion",$scope.searchString);
       angular.element.ajax({
                url: "http://dev2.slim.in:8983/solr/food/suggest",
                data: {
                    "q": $scope.searchString,
                    "wt": "json",
                    "spellcheck": "true",
                    "spellcheck.build": "true"
                 },
                traditional: true,
                cache: true,
                async: true,
                dataType: 'jsonp',
                success: function (data) {
                    //and when we get the query back we
                    //stick the results in the scope
                    $scope.$apply(function () {
                        $scope.suggestionPhrase = data.spellcheck.suggestions[1].suggestion;
                        console.log("suggestion from solr is  ",$scope.suggestionPhrase)
                    });
                },
                jsonp: 'json.wrf'
            });

}}

app.directive('autoComplete', function() {
 return function(scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: $scope.suggestionPhrase,
            select: function() {
                $timeout(function() {
                  iElement.trigger('input');
                }, 0);
            }
        });
};});

我不确定我的代码出错了，请指出错误。

Answer 1

我没有发现该指令有效，所以我得到了jquery自动完成

 $("#ingredients").autocomplete({
            source:function(request, response) { 
            angular.element.ajax({
                url: "http://dev2.slim.in:8983/solr/food/suggest",
                data: {
                    "q": $scope.searchString,
                    "wt": "json",
                    "spellcheck": "true",
                    "spellcheck.build": "true"



                },
                traditional: true,
                cache: true,
                async: true,
                dataType: 'jsonp',
                success: function (data) {
                    //and when we get the query back we
                    //stick the results in the scope
                    $scope.$apply(function () {
                        $scope.suggestionPhrase = data.spellcheck.suggestions[1].suggestion;
                          console.log("before suggestprint")


                        console.log("suggestion from solr is  ",$scope.suggestionPhrase)
                                response($scope.suggestionPhrase);               

                    });
                },
                jsonp: 'json.wrf'
            });} });

自动完成角度js无法正常工作

1 个答案: