使Jquery UI自动完成响应

时间:2016-02-01 13:13:34

标签: jquery jquery-autocomplete jquery-ui-autocomplete

我需要显示自动填充列表响应

<script type="text/javascript">
$(function() {

    //autocomplete
    $(".search_textbox").autocomplete({
        source: "../autocomplete.php",
        minLength: 1,
        create: function (event, ui) {   
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li>').append('<div class="autocompleteStore">' + item.key +
                    '</div><div class="autocompleteCashback"><span class="cashback-icon"></span><span class="cashback-text"> <span class="ac_cashback">'+item.desc+'</span></span></div>').appendTo(ul).css("position", "static");;
            };
        },
        select: function (e, ui) {
            var label = ui.item.label;
            var data = $('#searchtext').val(label);
            document.searchfrm.submit();
        } 

    });             

});

</script>

**我尝试了以下解决方案将div移动到自动填充文本框**

Jquery UI autocomplete. How to write the results inside a div using innerHTML?

将div移动到相应div的解决方案如下

<script type="text/javascript">
$(function() {

    //autocomplete
    $(".search_textbox").autocomplete({
        source: "../autocomplete.php",
        minLength: 1,
        open: function (event, ui) {
            $("#auto-complete").show();
            return $('<li>')
            .append('<div class="autocompleteStore"></div><div class="autocompleteCashback"><span class="cashback-icon"></span><span class="cashback-text"> <span class="ac_cashback"></span></span></div>')
                .appendTo("#auto-complete")
                .css("position", "static");

        select: function (e, ui) {
            var label = ui.item.label;
            var data = $('#searchtext').val(label);
            document.searchfrm.submit();
        } 

    });             

});

</script>

但是这个解决方案使它具有响应性,但是,数据不会进入开放功能。所以我决定使用create function并显示数据响应。

0 个答案:

没有答案