ng-click event on html5 datalist not working angularjs

Iam trying an auto search and on selecting a product., I need to redirect to the product URL associated to selected dropdown. Iam able to get all search results.

I have created datalist for all search list and created ng-click event on datalist to send the selected details to controller. But ng-click is not working in datalist. Can you help me out

for.eg. in (key,data) ., I need to show data in front end search box., but on selecting that data from datalist., I need to send its respective key to controller

problematic section for your reference (Full code in plunker):

<h2>Custom search field</h2>
            <div id="custom-search-input">
                <div class="input-group col-md-12">
                    <input type="text" class="form-control input-lg"  list="suggestions" placeholder="search" ng-model="obj.searchText" ng-focus="searchSuggest()" />
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-lg" type="button" ng-click="showProduct(obj)">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </div>
            </div>
            <div>
                <datalist id="suggestions">
                    <p ng-repeat="values in suggestionResults track by $index"><option ng-repeat="(key,data) in values" value="{{data}}"  ng-model="selectedProduct" ng-click="showProduct({key: key, data: data})"></p>
                </datalist>

            </div>

Here in above code., u can see key and data. I need to just show Data value but on selecting one option., i need to send the respective URL link to conroller. Created datalist in ng-repeat

Please select a value from dropdown in textbox from plunker link below

*

I have updated plunker so that URL also can be seen in search dropdown., I need to pass that URL to conroller in short. please help me how to achieve it

*

plnker code here

2 answers

  • answered 2018-05-16 06:02 Emad Dehnavi

    Your ng-click triggered fine in chrome, I can see your console.logs data.

    I check your code, the reason that your search logic is not working and you keep getting "not matching" in your console, is that you are using wrong condition, you are not checking the value, with search string, you are checking "Key/Value object" with search string.

    change your if condition in showProduct method to this :

    if ($scope.suggestionResults[i][Object.keys($scope.suggestionResults[i])[0]] == searchText) {
       console.log(Object.keys(response.data[i])[0]);
       $scope.redirectLink = Object.keys(response.data[i])[0];
    }else{
       $scope.redirectLink = "not matching";
    }
    

  • answered 2018-05-16 06:24 Shashank Vivek

    Check this plunkr

    I wrote another method

    $scope.inputChanged = function(data){
      var obj = _.find($scope.suggestionResults,function(o){
         var keyArr = Object.keys(o);
         return o[keyArr[0]] === data
      })
      $scope.showProduct(obj)
    }
    

    which will work as a workaround to achieve what you are looking for. From here you can call $scope.showProduct(obj) and achieve ng-click event behavior