Jquery 自动建议单击“能够”标记

Jquery Auto suggestion click able a tag

本文关键字：能够标记单击 Jquery 更新时间：2023-09-26

我正在使用jquery自动建议在站点 http://www.4songs.pk/上的搜索框。自动建议工作正常。我希望建议必须具有单击自定义 A 标记。我希望建议必须是可点击的链接。

网页代码

<form role="form" id="searchform" method="get" action="http://www.4songs.pk/search">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-8">
        <div class="input-group" style="padding:10px 0;">
          <input type="text" autocomplete="off" class="form-control" id="query" name="q" placeholder="Type Track Name and Press Search Button" required>
            <span class="input-group-btn">
                <button class="btn btn-success" id="searchsubmit" type="submit"><span class="glyphicon glyphicon-search"></span></button>
            </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
</form>

JS代码

function doSomething (txt) {
    $('#selection').text ('You selected: ' + txt);
}
$('#query').autocomplete({
    source: function (request, response) {
        var url = 'http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q=' + escape (request.term) + '&format=5&alt=json&callback=?';
        $.getJSON (url, function (json) {
            var results = [];
            $.each (json[1], function (ix, val) {
                results.push ('<a href="">'+val [0]+'</a>');
            });
            response (results);
        });
    },
    select: function(e, ui) {
        if (e.which === 13 ) {
            return false;
        }
    },
    delay:200
});
$('#query').keypress (function (ev) {
    if (ev.keyCode === 13) {
        $('#query').autocomplete ('close');
        $('#searchform').submit();
        var txt = $(this).val ();
        doSomething (txt);
        return (false);
    }
});

小提琴链接 http://jsfiddle.net/nmz95e7d/

更新您的选择语句以重定向 url

 select: function(e, ui) {   
            location.href="whereyouwanttogo.com/" + ui.item.label;
        },

完整代码

            <form role="form" id="searchform" method="get" action="http://www.4songs.pk/search">
            <div class="row">
              <div class="col-xs-12 col-sm-6 col-md-8">
                <div class="input-group" style="padding:10px 0;">
                  <input type="text" autocomplete="off" class="form-control" id="query" name="q" placeholder="Type Track Name and Press Search Button" required>                       
                </div><!-- /input-group -->
                <div id="tag_update"></div>
              </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </form>

.JS

function doSomething (txt) {
    $('#selection').text ('You selected: ' + txt);
}
$('#query').autocomplete({
    source: function (request, response) {
        var url = 'http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q=' + escape (request.term) + '&format=5&alt=json&callback=?';
        $.getJSON (url, function (json) {
            var results = [];
            $.each (json[1], function (ix, val) {
                results.push (val [0]);
            });
            response (results);
        });
    },
    select: function(e, ui) {
        //location.href="http://www.4songs.pk/search?q=" + ui;
        window.open('http://www.4songs.pk/search?q='+ ui.item.label.replace(/'s/g, "+"),'_blank');
        if (e.which === 13 ) {
            return false;
        }
    },
    delay:200
});