Question

我正在使用laravel和ajax进行自动完成搜索。我正在使用Jquery UI来显示结果。

  <link rel="stylesheet"href="//codeorigin.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//codeorigin.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $("#busqueda").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "{{URL('ajax/getBooksAutocomplete')}}",
                    data: {
                        busqueda: this.term
                    },
                    success: function (data) {

                        response( $.map( data, function( item ) {
                            return {label: item.title, value: item.url};
                        }));
                    },
                });
            },
        });
    });
    </script>

    <script type="text/javascript">
     $("#busqueda2").autocomplete({

       select: function (event, ui) {
        $('#busqueda2').val(ui.item.title);
        $('#busqueda').val(ui.item.title);
       }

    });
    </script>

自动完成功能：

enter image description here

但是当我选择一个选项时，我想重定向到该选项的网址。网址：item.url

我认为结果选项必须是这样的：

<div><a href="'+ item.url +'">'+item.title+'</a></div>

¿我该怎么做？

Edit1：我的表单

{{ Form::open(array('action' => array('BookController@getBooksAutocomplete'))) }}

{{ Form::text('busqueda', '', array('class'=>'ui-widget ui-widget-content ui-corner-all', 'id'=>'busqueda')) }}

{{ Form::close() }}

Answer 1

DEMO 在根据ui.item.url值选择选项时显示重定向到商品网址。

JS代码：

$(function() {
var projects = [
{
value: "yahoo",
label: "Yahoo !",
desc: "this is Yahoo !",
//icon: "jquery_32x32.png",
url:'http://yahoo.com'    
},
{
value: "bing",
label: "Bing",
desc: "This is Bing !",
//icon: "jqueryui_32x32.png",
url:'http://bing.com'    
},
{
value: "google",
label: "Google",
desc: "search engine",
//icon: "sizzlejs_32x32.png",
url:'http://google.com'
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label);
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
    alert("You are going to be redirected to : "+ui.item.url);
    window.location.href = ui.item.url;
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});

AJAX自动完成搜索返回div与链接

1 个答案: