I have an old autocomplete.js code and with modification I tried to migrate it to typehead.js. The problem is I quite didn't find any results similar to angular and ajax.
我有一个旧的autocomplete.js代码,经过修改后我尝试将其迁移到typehead.js。问题是我没有找到类似于angular和ajax的任何结果。
Here's my script.
这是我的剧本。
$('#empid').typeahead({
minLength: 1,
source: function (request, response) {
$.ajax({
url: "http://localhost:2222/api/search/PostSearch",
type: "POST",
data: "{'eid':'" + document.getElementById('empid').value + "'}",
dataType: 'json',
success: function (data) {
response(jQuery.parseJSON(data));
}
});
}
});
So How do I correctly do this. Help would be much appreciated.
那么我该如何正确地做到这一点。非常感谢帮助。
Hi added the html script. Still couldn't let it to work. Can you help?
嗨添加了html脚本。仍然无法让它发挥作用。你能帮我吗?
<script src="../../js/form-search.js"></script>
<!-- .page-content -->
<div ng-controller="SearchController" class="page-content clearfix">
<!-- .page-content-wrapper -->
<div class="page-content-wrapper">
<div class="page-content-inner">
<!-- Start .page-content-inner -->
<div id="page-header" class="clearfix">
<div class="page-header">
<h2>Search Employee</h2>
<span class="txt">Search and manage employees</span>
</div>
<div class="header-stats">
<div class="spark clearfix">
<div class="spark-info"><span class="number">2345</span>Visitors</div>
<div id="spark-visitors" class="sparkline"></div>
</div>
<div class="spark clearfix">
<div class="spark-info"><span class="number">17345</span>Views</div>
<div id="spark-templateviews" class="sparkline"></div>
</div>
<div class="spark clearfix">
<div class="spark-info"><span class="number">3700$</span>Sales</div>
<div id="spark-sales" class="sparkline"></div>
</div>
</div>
</div>
<!-- Start .row -->
<div class="row">
<div class="col-lg-12">
<!-- col-lg-12 start here -->
<div class="panel panel-default plain toggle panelMove panelClose panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Basic Data tables</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Employee id</label>
<div class="col-lg-10 col-md-9">
<input id="empid" ng-model="searchedDetail.id" type="text" class="form-control" name="empid" />
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Employee name</label>
<div class="col-lg-10 col-md-9">
<input id="ename" ng-model="searchedDetail.ename" type="text" class="form-control" name="ename">
</div>
</div>
<!-- End .form-group -->
<div class="row">
<div class="col-lg-9 col-sm-9 col-xs-12 col-sm-offset-3">
<button id="btnSearch" type="submit" ng-click="searchb()" class="btn btn-default pad">Search</button>
</div>
</div>
<table id="basic-datatables" class="table table-striped table-bordered" cellspacing="0" width="100">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>email</th>
<th>mobile no</th>
<th>designation</th>
<th>date of join</th>
<th>nic</th>
<th>department name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employes" style="text-align:center">
<td>{{emp.fname}}</td>
<td>{{emp.lname}}</td>
<td>{{emp.DOB}}</td>
<td>{{emp.gender}}</td>
<td>{{emp.email}}</td>
<td>{{emp.mobile_no}}</td>
<td>{{emp.designation}}</td>
<td>{{emp.date_of_join}}</td>
<td>{{emp.nic}}</td>
<td>{{emp.department_name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-12 end here -->
</div>
<!-- End .row -->
</div>
<!-- End .page-content-inner -->
</div>
<!-- / page-content-wrapper -->
</div>
<!-- / page-content -->
1 个解决方案
#1
0
Here is a complete working solution
这是一个完整的工作解决方案
function BindEmployeeTypeAhead() {
$.ajax({
type: "POST",
url: "http://localhost:2222/api/search/PostSearch",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: SuccessBindEmployeeTypeAhead,
error: FailureBindEmployeeTypeAhead
});
}
function SuccessBindEmployeeTypeAhead(response) {
try {
if (response == "")
return;
var dataSource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('EmployeeID', 'EmployeeName'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: JSON.parse(response)
});
dataSource.initialize();
$("#empid").typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
display: function (item) {
return item.EmployeeName //Name of property to be shown
},
source: dataSource.ttAdapter(),
suggestion: function (data) {
return '<div>' + data.EmployeeName + '–' + data.EmployeeID + '</div>'
}
});
}
catch (e) {
}
}
function FailureBindEmployeeTypeAhead() {
}
#1
0
Here is a complete working solution
这是一个完整的工作解决方案
function BindEmployeeTypeAhead() {
$.ajax({
type: "POST",
url: "http://localhost:2222/api/search/PostSearch",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: SuccessBindEmployeeTypeAhead,
error: FailureBindEmployeeTypeAhead
});
}
function SuccessBindEmployeeTypeAhead(response) {
try {
if (response == "")
return;
var dataSource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('EmployeeID', 'EmployeeName'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: JSON.parse(response)
});
dataSource.initialize();
$("#empid").typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
display: function (item) {
return item.EmployeeName //Name of property to be shown
},
source: dataSource.ttAdapter(),
suggestion: function (data) {
return '<div>' + data.EmployeeName + '–' + data.EmployeeID + '</div>'
}
});
}
catch (e) {
}
}
function FailureBindEmployeeTypeAhead() {
}