CODEWITHSUNDEEP
angularjstypeahead.js
Sikandar Sahab
Sikandar Sahab

Reputation: 708

Typeahead TypeError: b.toLowerCase() is not a function

I'm trying to take data from spring boot service, and use to populate in Typeahead.

When I start typing in the textfield I get this error

enter image description here

HTML

<input autocomplete="off" type="text" 
    ng-model="loadStopForm.stop" name="typeahead-2" 
        data-provide="typeahead" class="typeahead-2 form-control">

Controller Code

$.get(serviceCompanyAll, function(data) {

    $('.typeahead-2').typeahead({
       source: data
    });

}, 'json');

Data: 01, Data that doesn't work - see Data: 02, that works fine.

[  
{  
  "@type":"CR",
  "companyId":1819,
  "companyCode":"NVX",
  "legalName":"Navex",
  "dbaName":"Navex Inc.",
  "formation":"P",
  "firstName":null,
  "middleName":null,
  "lastName":null,
  "dob":null,
  "registeredAgent":{  
     "personId":2,
     "category":null,
     "firstName":"Arthur",
     "middleName":"Parho",
     "lastName":"Benjiman",
     "dob":null,
     "addresses":null,
     "contacts":null,
     "fullName":"Benjiman, Arthur"
  },
  "filingDate":null,
  "filingNo":null,
  "documentNumber":null,
  "ssn":null,
  "ein":null,
  "internal":true,
  "business":{  
     "code":"CR",
     "value":"Carrier"
  },
  "locations":[  
     {  
        "id":1821,
        "landmark":"4104 Banner Dr.",
        "type":{  
           "code":"P",
           "value":"Physical"
        },
        "street1":"4104 Banner Dr.",
        "street2":null,
        "city":"Houston",
        "state":"TX",
        "zip":"77550",
        "country":null,
        "latitude":null,
        "longitude":null,
        "contacts":[  

        ],
        "action":0
     }
  ],
  "mcNumber":"124578",
  "dotunitSeries":"111",
  "billingMethod":null,
  "businessName":"Navex"
}, {  
  "@type":"SH",
  "companyId":1824,
  "companyCode":null,
  "legalName":null,
  "dbaName":null,
  "formation":"I",
  "firstName":"Sikandar",
  "middleName":"",
  "lastName":"Ali",
  "dob":"05/01/2018",
  "registeredAgent":null,
  "filingDate":null,
  "filingNo":null,
  "documentNumber":null,
  "ssn":124578963,
  "ein":null,
  "internal":true,
  "business":{  
     "code":"SH",
     "value":"Shipper"
  },
  "locations":[  
     {  
        "id":1825,
        "landmark":"2202 Jennifer St",
        "type":{  
           "code":"P",
           "value":"Physical"
        },
        "street1":"2202 Jennifer St",
        "street2":null,
        "city":"Dallas",
        "state":"TX",
        "zip":"77880",
        "country":null,
        "latitude":null,
        "longitude":null,
        "contacts":[  
           {  
              "id":1826,
              "medium":{  
                 "code":"EM",
                 "value":"Email"
              },
              "serviceLocator":"[email protected]",
              "prefered":true,
              "action":0
           }
        ],
        "action":0
     }
  ],
  "dotunitSeries":null,
  "billingMethod":null,
  "mcNumber":null,
  "businessName":"Ali, Sikandar"
 },
 {  
  "@type":"TS",
  "companyId":1827,
  "companyCode":"",
  "legalName":"Wayis",
  "dbaName":"",
  "formation":"C",
  "firstName":null,
  "middleName":null,
  "lastName":null,
  "dob":null,
  "registeredAgent":null,
  "filingDate":null,
  "filingNo":null,
  "documentNumber":null,
  "ssn":null,
  "ein":null,
  "internal":true,
  "business":{  
     "code":"TS",
     "value":"Truck Stop"
  },
  "locations":[  
     {  
        "id":1828,
        "landmark":"2001 Ravi St",
        "type":{  
           "code":"P",
           "value":"Physical"
        },
        "street1":"2001 Ravi St",
        "street2":null,
        "city":"Dallas",
        "state":"HI",
        "zip":"12345",
        "country":null,
        "latitude":null,
        "longitude":null,
        "contacts":[  

        ],
        "action":0
     }
  ],
  "dotunitSeries":null,
  "billingMethod":null,
  "mcNumber":null,
  "businessName":"Wayis"
}, {  
  "@type":"BR",
  "companyId":1871,
  "companyCode":"",
  "legalName":"E2 Financial",
  "dbaName":"E2F",
  "formation":"C",
  "firstName":null,
  "middleName":null,
  "lastName":null,
  "dob":null,
  "registeredAgent":null,
  "filingDate":null,
  "filingNo":null,
  "documentNumber":null,
  "ssn":null,
  "ein":null,
  "internal":false,
  "business":{  
     "code":"BR",
     "value":"Broker"
  },
  "locations":null,
  "mcNumber":"124578",
  "billingMethod":"MCS",
  "dotunitSeries":null,
  "businessName":"E2 Financial"
}
]

Data: 02, this data works fine:

[
  {
    "name": "Ethel Price",
    "gender": "female",
    "company": "Enersol"
  },
  {
    "name": "Claudine Neal",
    "gender": "female",
    "company": "Sealoud"
  },
  {
    "name": "Beryl Rice",
    "gender": "female",
    "company": "Velity"
  },
  {
    "name": "Wilder Gonzales",
    "gender": "male",
    "company": "Geekko"
  }
]

Please Read Carefully:

  1. In data: 01, [name, gender, company]: search is being performed using name.
  2. In data: 02, [@type, companyId, companyCode, legalName, so on.... ]: search should be performed via legalName/companyId or anyother field, doesn't matter.

Please guide me through How do I do this?

Thanks.

Upvotes: 2

Views: 4144

Answers (2)

Sravan
Sravan

Reputation: 18657

I recommend not to use jquery with angular

Here is a working code in angular way

You can search using legalName itself as you mentioned in the question.

I used Angular UI-Bootstrap and no jquery is included

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  var _selected;

  $scope.selected = undefined;
  $scope.states = [  
{  
  "@type":"CR",
  "companyId":1819,
  "companyCode":"NVX",
  "legalName":"Navex",
  "dbaName":"Navex Inc.",
  "formation":"P",
  "firstName":null,
  "middleName":null,
  "lastName":null,
  "dob":null,
  "registeredAgent":{  
     "personId":2,
     "category":null,
     "firstName":"Arthur",
     "middleName":"Parho",
     "lastName":"Benjiman",
     "dob":null,
     "addresses":null,
     "contacts":null,
     "fullName":"Benjiman, Arthur"
  },
  "filingDate":null,
  "filingNo":null,
  "documentNumber":null,
  "ssn":null,
  "ein":null,
  "internal":true,
  "business":{  
     "code":"CR",
     "value":"Carrier"
  },
  "locations":[  
     {  
        "id":1821,
        "landmark":"4104 Banner Dr.",
        "type":{  
           "code":"P",
           "value":"Physical"
        },
        "street1":"4104 Banner Dr.",
        "street2":null,
        "city":"Houston",
        "state":"TX",
        "zip":"77550",
        "country":null,
        "latitude":null,
        "longitude":null,
        "contacts":[  

        ],
        "action":0
     }
  ],
  "mcNumber":"124578",
  "dotunitSeries":"111",
  "billingMethod":null,
  "businessName":"Navex"
}, {  
  "@type":"SH",
  "companyId":1824,
  "companyCode":null,
  "legalName":null,
  "dbaName":null,
  "formation":"I",
  "firstName":"Sikandar",
  "middleName":"",
  "lastName":"Ali",
  "dob":"05/01/2018",
  "registeredAgent":null,
  "filingDate":null,
  "filingNo":null,
  "documentNumber":null,
  "ssn":124578963,
  "ein":null,
  "internal":true,
  "business":{  
     "code":"SH",
     "value":"Shipper"
  },
  "locations":[  
     {  
        "id":1825,
        "landmark":"2202 Jennifer St",
        "type":{  
           "code":"P",
           "value":"Physical"
        },
        "street1":"2202 Jennifer St",
        "street2":null,
        "city":"Dallas",
        "state":"TX",
        "zip":"77880",
        "country":null,
        "latitude":null,
        "longitude":null,
        "contacts":[  
           {  
              "id":1826,
              "medium":{  
                 "code":"EM",
                 "value":"Email"
              },
              "serviceLocator":"[email protected]",
              "prefered":true,
              "action":0
           }
        ],
        "action":0
     }
  ],
  "dotunitSeries":null,
  "billingMethod":null,
  "mcNumber":null,
  "businessName":"Ali, Sikandar"
 },
 {  
  "@type":"TS",
  "companyId":1827,
  "companyCode":"",
  "legalName":"Wayis",
  "dbaName":"",
  "formation":"C",
  "firstName":null,
  "middleName":null,
  "lastName":null,
  "dob":null,
  "registeredAgent":null,
  "filingDate":null,
  "filingNo":null,
  "documentNumber":null,
  "ssn":null,
  "ein":null,
  "internal":true,
  "business":{  
     "code":"TS",
     "value":"Truck Stop"
  },
  "locations":[  
     {  
        "id":1828,
        "landmark":"2001 Ravi St",
        "type":{  
           "code":"P",
           "value":"Physical"
        },
        "street1":"2001 Ravi St",
        "street2":null,
        "city":"Dallas",
        "state":"HI",
        "zip":"12345",
        "country":null,
        "latitude":null,
        "longitude":null,
        "contacts":[  

        ],
        "action":0
     }
  ],
  "dotunitSeries":null,
  "billingMethod":null,
  "mcNumber":null,
  "businessName":"Wayis"
}, {  
  "@type":"BR",
  "companyId":1871,
  "companyCode":"",
  "legalName":"E2 Financial",
  "dbaName":"E2F",
  "formation":"C",
  "firstName":null,
  "middleName":null,
  "lastName":null,
  "dob":null,
  "registeredAgent":null,
  "filingDate":null,
  "filingNo":null,
  "documentNumber":null,
  "ssn":null,
  "ein":null,
  "internal":false,
  "business":{  
     "code":"BR",
     "value":"Broker"
  },
  "locations":null,
  "mcNumber":"124578",
  "billingMethod":"MCS",
  "dotunitSeries":null,
  "businessName":"E2 Financial"
}
]
  // Any function returning a promise object can be used to load values asynchronously
  $scope.getLocation = function(val) {
    return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(response){
      return response.data.results.map(function(item){
        return item.formatted_address;
      });
    });
  };

  $scope.ngModelOptionsSelected = function(value) {
    if (arguments.length) {
      _selected = value;
    } else {
      return _selected;
    }
  };

  $scope.modelOptions = {
    debounce: {
      default: 500,
      blur: 250
    },
    getterSetter: true
  };

  $scope.statesWithFlags = [{'name':'Alabama','flag':'5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},{'name':'Alaska','flag':'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},{'name':'Arizona','flag':'9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'},{'name':'Arkansas','flag':'9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'},{'name':'California','flag':'0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'},{'name':'Colorado','flag':'4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'},{'name':'Connecticut','flag':'9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'},{'name':'Delaware','flag':'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'},{'name':'Florida','flag':'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'},{'name':'Georgia','flag':'5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'},{'name':'Hawaii','flag':'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'},{'name':'Idaho','flag':'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'},{'name':'Illinois','flag':'0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'},{'name':'Indiana','flag':'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'},{'name':'Iowa','flag':'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'},{'name':'Kansas','flag':'d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'},{'name':'Kentucky','flag':'8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'},{'name':'Louisiana','flag':'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'},{'name':'Maine','flag':'3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'},{'name':'Maryland','flag':'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'},{'name':'Massachusetts','flag':'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'},{'name':'Michigan','flag':'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'},{'name':'Minnesota','flag':'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'},{'name':'Mississippi','flag':'4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'},{'name':'Missouri','flag':'5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'},{'name':'Montana','flag':'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'},{'name':'Nebraska','flag':'4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'},{'name':'Nevada','flag':'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'},{'name':'New Hampshire','flag':'2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'},{'name':'New Jersey','flag':'9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'},{'name':'New Mexico','flag':'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'},{'name':'New York','flag':'1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'},{'name':'North Carolina','flag':'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'},{'name':'North Dakota','flag':'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'},{'name':'Ohio','flag':'4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'},{'name':'Oklahoma','flag':'6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'},{'name':'Oregon','flag':'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'},{'name':'Pennsylvania','flag':'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'},{'name':'Rhode Island','flag':'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'},{'name':'South Carolina','flag':'6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'},{'name':'South Dakota','flag':'1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'},{'name':'Tennessee','flag':'9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'},{'name':'Texas','flag':'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'},{'name':'Utah','flag':'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'},{'name':'Vermont','flag':'4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'},{'name':'Virginia','flag':'4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'},{'name':'Washington','flag':'5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'},{'name':'West Virginia','flag':'2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'},{'name':'Wisconsin','flag':'2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'},{'name':'Wyoming','flag':'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'}];
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>



<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">

    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" uib-typeahead="state.legalName as state.legalName for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>
  </body>
</html>

Please run the above snippet

Here is a Working DEMO

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38693

I am not sure where is you are using b.toLowercase()?? . But the proper solution is you should check a null condition for b object before doing to lowercase.

like 

if(b != null)
{
b.toLowerCase()// your code...
}

Note:

See your array have "legalName":null,. So it should not be null. Or manually you need to do the above condition in your inbuilt library code.

EDIT:

In data: 02, [@type, companyId, companyCode, legalName, so on.... ]: search should be performed via legalName/companyId or any other field, doesn't matter.

If you don't want to check the null condition then the value should not be a null.

Reason for the error

Because null.toLowercase() throwing not a function error. Same it will be happen if your value has null.

Edit -2

as per the below comment . please do overwrite that function with this below finction 

function(a) {
        var b = this.displayText(a);
        return b != null ? b.toLowerCase().indexOf(this.query.toLowerCase()) : "".toLowerCase().indexOf(this.query.toLowerCase())
    },

Now you can do search by any object, no need to care about the value is null

Upvotes: 1

Related Questions