2
AJAX URLに問題があります。私はAJAXを使ってオートコンプリートのデータを取得しようとしています.AJAXのURLは動的に割り当てられます。しかし、それは動作しませんが、私は静的なAJAXのURL文字列を置く場合は、それは完璧に動作します。お願い助けて。おかげ動的に割り当てられたAjax URL文字列がjquery-uiに何も表示されないオートコンプリート
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST Window</title>
<link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}">
<script src="{{asset('js/jquery.js')}}"></script>
<script src="{{asset('js/jquery-ui.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
</head>
<body>
<form action ="{{route('testbtn')}}" method='POST' accept-charset="UTF-8" novalidate="novalidate" class="form-horizontal">
<div class="row">
{{csrf_field()}}
<div class="col-md-1" >Profession </div>
<div class="col-md-3">
<input type="text" placeholder="Select profession" class="ui-widget form-control autocomplete" name="f1" id="f1" value="" data-href="{{URL::to('searchp')}}">
</div>
</div>
<div class="row">
<div class="col-md-1" >Region</div>
<div class="col-md-3">
<input type="text" placeholder="Select a region" class="ui-widget form-control autocomplete" name="f2" id="f2" value="" data-href="{{URL::to('searchr')}}">
</div>
</div>
<div class="row`">
<div class="col-md-1" >MKB list</div>
<div class="col-md-3">
<input type="text" placeholder="Select MKB" class="ui-widget form-control autocomplete" name="f3" id="f3" value="" data-href="{{URL::to('get1mkb10')}}">
</div>
<div class="col-md-1"><p id="id"></p></div>
<div class="col-md-2">
<input type="submit" value='submit' />
</div>
</div>
</form>
<script>
$(".autocomplete").each(function(index, value){
$(this).autocomplete({
source: function(request, response){
$.ajax({
url: $(this).data('href'),
dataType: "json",
data: {term:request.term},
success:function(data){
response($.map(data, function(item){
return { label: item.label, id: item.id}
}));
}
});
},
minLength: 2,
focus: function(event, ui){
$(this).val(ui.item.label);
},
select: function(event, ui) {
$(this).val(ui.item.label);
$(this).attr("value",ui.item.id);
}
});
});
</script>
</body>
</html>
console.log($(this).data( 'href'))の結果を表示します。 –
09:41:29.1103テスト:48 HREF:http:// lrvlauth/searchp 09:41:29.118テスト:48 HREF:http:// lrvlauth/searchr 09:41:29.122テスト:48 HREF : "http:// lrvlauth/get1mkb10" 09:41:32.156 jquery.js:9566 XHRのロードが完了しました。 "http:// lrvlauth/test?term = ht"を取得してください。 – UlanbekA
一般的に、AJAXは正しいデータを返します。しかし、オートコンプリートは結果を表示しません。しかし、URLを静的テキストに変更すると、すべてが表示されます。 – UlanbekA