如何使用 JQuery UI 自动完成

Question

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

我有这个函数使用网络服务（根据用户的输入返回地点的名称和 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”， “描述”：“巴黎，法国” }, { “placeId”：“ChIJPb3wuJFZ8kcREOAOszTOCQQ”， “描述”：“法国巴黎医院” }, { “placeId”：“ChIJ40p0EoXQ3UcRENJjgT7xCgQ”， “描述”：“Le Touquet-Paris-Plage，法国” }, { “placeId”：“ChIJ18V5kFPd80cRU075_QZazHE”， "description" : "Paray-le-Monial, 法国" } ]

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

Answer 1

$(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);
	 		}
	 	});
    });
});