Sunday, October 13, 2013

autocomplete WebMothod with select event


 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
    </script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
    </script>
    <link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
   $("#nameText").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Default4.aspx/getdatas",
                    data: "{strterm: '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.label ,
                                value: item.record,
                                id: item.type,
                                first: item.key,
                                last: item.key
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function (event, ui) {
             $("#TextBox1").val(ui.item.id);
            },
            minLength: 1
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + item.value + item.id + item.first + "</a>")
            .appendTo(ul);
        };
});
</script>

No comments:

Post a Comment