自动完成组合框

Question

我正在使用HTML，JavaScript，ASP .NET MVC3和JSON进行自动完成。

我有一个文本框，我在其中实现了自动完成功能。但我想将文本框更改为组合框。我可以使用某种标签轻松将其更改为组合框吗？如果有，标签的一些属性是什么？例如，禁止搜索自定义文本，以便只提交自动完成的建议输入。如果不是，我怎么能实现这种组合框。这就是我现在的代码。

HTML：

<div id = "inputTable">
<table>
    <tr>
        <td><span class="labelText">Text1</span></td> 
        <td><input id="text1" type="text" placeholder="Enter Text1" data-text1autocomplete="@Url.Action("searchText1", "Scan")"/> </td> 
        <td style="width: 200px; text-align: left; margin-left: 5px"><button class="medium awesome blue" id="sendText1Button">Send Text1</button></td>
    </tr>
    <tr>
        <td> <span class="labelText">Text2</span> </td> 
        <td><input id="text2" type="text" placeholder="Enter Text2" data-text2autocomplete="@Url.Action("searchText2", "Scan")"/> </td>   
        <td style="width: 200px; text-align: left; margin-left: 5px"> <button class="medium awesome blue" id="sendText2Button">Send Text2</button> </td>
    </tr>
</table>

JavaScript的：

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

    $(':input[data-text1autocomplete]').each(function () {
        $(this).autocomplete({ source: $(this).attr("data-text1autocomplete") });
    });

    $(':input[data-text2autocomplete]').each(function () {
        $(this).autocomplete({ source: $(this).attr("data-text2autocomplete") });
    });

    $('#sendText1Button').click(function () {
        var text1 = $("#text1").val();
        $('#loadingUsageInfo').css({ 'visibility': 'visible' });
        if (text1 == "" || text1 == 'Enter Text1') {
            alert('Enter Text1 First');
            return;
        }
        $.ajax({
            url: '@Url.Action("ShowTable1", "Scan")',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ inputText1: text1 }),
            traditional: true,
            success: function (result) {
                $('#hostusageinfo').html(result);
            }
        });
        $('#text1').val("");
        $('#text2').val("");
    });


    $('#sendText2Button').click(function () {
        var text2 = $("#text2").val();
        $('#loadingUsageInfo').css({ 'visibility': 'visible' });
        if (text2 == "" || text2 == 'Enter Text2') {
            alert('Enter Text2 First');
            return;
        }

        $.ajax({
            url: '@Url.Action("ShowTable2", "Scan")',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ inputText2: text2 }),
            traditional: true,
            success: function (result) {
                $('#hostusageinfo').html(result);
            }
        });
        $('#text1').val("");
        $('#text2').val("");
    });

    $('#text1, #text2').keypress(function (e) {
        if (e.which == 13) {
            var text1 = $("#text1").val();
            var text2 = $("#text2").val();
            if ((text1 == "" || text1 == 'Enter Text1') && (text2 == "" || text2 == 'Enter Text2')) {
                alert('Enter Text First');
                return;
            }
            else if (text1 == "" || text1 == 'Enter Text1')
                $('#sendText2Button').trigger('click');
            else if (text2 == "" || text2 == 'Enter Text2')
                $('#sendText1Button').trigger('click');
        }
    });

});

感谢任何可以提供帮助的人！