自动完成选择事件问题

时间:2017-05-11 12:57:21

标签: javascript jquery autocomplete visualforce

我正在visualforce页面中开发自动完成搜索文本框。我想我已经完成了这项工作,但遇到了一些问题。

但是,当在建议列表中选择该值时,它不会绑定/放入搜索文本框。

这是我的剧本

    <script>
$(function(){
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _create: function() {
            this._super();
            this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
        },
        _renderItem: function (ul, item) {
            return $("<li>")
            .attr("data-value",item.subtecharea)
            .append(item.subtecharea)
            .appendTo(ul);
        },
        _renderMenu: function( ul, items ) {
            var that = this,
                currenttecharea = "";
            $.each( items, function( index, item ) {
                var li;
                if ( item.techarea != currenttecharea ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.techarea + "</li>" );
                    currenttecharea = item.techarea;
                }
                li = that._renderItem( ul, item );

            });
        }
    });
    $.ajax({
        'async': true,
        'global': false,
        'url': "{!URLFOR($Resource.techareasubtecharea, '/techarea.json')}",
        'dataType': "json",
        'success': function (data) {
            $('#search').catcomplete({
                delay: 0,
                source: data.attr("#search"),
                select: function (event, ui) {
                    $('#search').val(ui.item.techarea + " => " + ui.item.subtecharea).width(ui.item.techarea.length+ui.item.subtecharea.length * 16);
                    return false;
                }
            }).focus();
        }
    });
})
</script>

插件:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

<script src="https://code.jquery.com/jquery-2.2.0.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js">
</script>    

<apex:stylesheet value="{!URLFOR($Resource.bootstrapiso, 'bootstrap-iso/bootstrap-iso.css')}"/>

0 个答案:

没有答案