[RESOLVED]JQuery Autocomplete Search

Hello everyone and thanks for your help in advance.  I want to develop a search page using JQuery autocomplete widget.  I want to have three input boxes, LastName, FirstName, and ID.  I want to be able to type into the LastName box and the autocomplete return
a list that contains LastName, FirstName.  When the selection is clicked, the LastName, FirstName, and ID input boxes are populated.  I’ve found basic autocomplete examples, but nothing that shows how to split the return data into multiple boxes.  Any help
would be appreciated.

Hi kmcnet,

Thanks for your post.

As for your problem, I recommend to assign to your textboxes in select event. You could refer to the following sample I create for you.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../../JS/jquery-ui.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-1.8.2.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h2 class="demoHeaders">Autocomplete</h2>
            <div>
                LastNameļ¼š<input id="txtlastname" title="type &quot;a&quot;" />&nbsp;
                FirstName:<input id="txtfirstname" title="type &quot;a&quot;" />&nbsp;
                ID:<input id="txtID" title="type &quot;a&quot;" />
            </div>
        </div>
    </form>
</body>
</html>
<script src="../../JS/jquery.js"></script>
<script src="../../JS/jquery-ui.js"></script>
<script>
    var availableTags = [
	"Tonny,Sam,1",
	"Allen,John,2",
	"Wall,Paul,3"
    ];
    $("#txtlastname").autocomplete({
        source: availableTags,
        select: function (event, ui) {
            //alert(ui.item.value);
            var info = ui.item.value;
            var lfi = info.split(',');
            $("#txtlastname").val(lfi[0]);
            $("#txtfirstname").val(lfi[1]);
            $("#txtID").val(lfi[2]);
            return false;

        }
    });
</script> 

For more information about Autocomplete select event, you could refer to this link.

If you have any question about this issue, please let me know freely.

Best Regards,

Fei Han

you can use select part of jQuery Autocomplete widget which allows you to customize output

select: function (event, ui) {
        if (ui.item) {
            split(ui.item.value); // add your logic to split output
        }
    },

for more info on 
how to use selected item of autocomplete widget

Thanks for the help.  Worked great!

Leave a Reply