如何使用JQuery UI自动完成

时间:2017-03-19 12:41:38

标签: javascript jquery ajax jquery-ui autocomplete

拜托,我需要一点帮助。 (我不是用户体验开发人员) 我有一个学校网络“拼车”应用程序项目。 我尝试使用jquery自动完成来显示出发和到达的地方。

我有这个功能使用一个web服务(根据用户的输入返回地名和id)

auto=function(){
	var query=document.getElementsByTagName('input')[0].value;
 	var u = "http://covoiturage.hhacherouf.info/trips/autocomplete-place"+"?query="+query;
	$.ajax({
    url: u,
    contentType: "application/json",
    method: "GET",
	})
	.done(function(data) {
    console.log(data);
	localStorage.setItem("placeId",data.placeId);
	localStorage.setItem("description",data.description);
	});
}

例如如果用户输入字符串Paris,响应将是: [{   “placeId”:“ChIJD7fiBh9u5kcRYJSMaMOCCwQ”,   “描述”:“巴黎,法国” },{   “placeId”:“ChIJPbgDXcoqrBIRf74-UUHi4z4”,   “description”:“Parisot,France” },{   “placeId”:“ChIJPb3wuJFZ8kcREOAOszTOCQQ”,   “描述”:“Paris-l'Hôpital,France” },{   “placeId”:“ChIJ40p0EoXQ3UcRENJjgT7xCgQ”,   “描述”:“Le Touquet-Paris-Plage,France” },{   “placeId”:“ChIJ18V5kFPd80cRU075_QZazHE”,   “description”:“Paray-le-Monial,France” }]

我想要自动功能请求中的文本字段显示名称。 非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

$(function(){
	 $(document).ready(function() {
    	var u = "auto()";
	 	$('#departure').autocomplete({
	 		source: function(request,response){
	 			$.ajax({
	 				url:u,
	 				datatype:json,
	 				data:{q:request.term},
	 				sucess:function(data){
	 					response(data);
	 				}
	 			});
	 		},
	 		minLength:1,
	 		select:function(event,ui){
	 			alert("selection:"+ ui.item.label);
	 		}
	 	});
    });
});