我试图从Spring启动服务中获取数据,并用于填充Typeahead。
当我开始在文本字段中输入时,我收到此错误
HTML
<input autocomplete="off" type="text"
ng-model="loadStopForm.stop" name="typeahead-2"
data-provide="typeahead" class="typeahead-2 form-control">
控制器代码
$.get(serviceCompanyAll, function(data) {
$('.typeahead-2').typeahead({
source: data
});
}, 'json');
数据:01,无效的数据 - 请参见数据:02,工作正常。
[
{
"@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":"sikandarali744@gmail.com",
"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"
}
]
数据:02,这个数据运行正常:
[
{
"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"
}
]
请仔细阅读:
请指导我如何做到这一点?
感谢。
答案 0 :(得分:1)
我建议不要使用角度为
的jquery
这是一个有角度的工作代码
您可以按照问题中提到的legalName
进行搜索。
我使用了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":"sikandarali744@gmail.com",
"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>
请运行以上代码段
答案 1 :(得分:0)
我不确定你在哪里使用b.toLowercase()
?? 。但是正确的解决方案是在执行小写之前应该检查b
对象的空条件。
喜欢
if(b != null)
{
b.toLowerCase()// your code...
}
注意:强>
查看您的数组
"legalName":null,
。所以它不应该是null。或者手动,您需要在内置库代码中执行上述条件。
在数据:02,[@ type,companyId,companyCode,legalName,等等......]:搜索应该通过legalName / companyId或任何其他字段执行,无关紧要。
如果您不想检查null条件,则该值不应为null。
因为
null.toLowercase()
没有抛出函数错误。如果您的值为null
,则会发生相同的情况。
根据以下评论。请用下面的结尾覆盖该功能
function(a) {
var b = this.displayText(a);
return b != null ? b.toLowerCase().indexOf(this.query.toLowerCase()) : "".toLowerCase().indexOf(this.query.toLowerCase())
},
现在你可以按任何对象进行搜索,无需关心值 null