0

オートコンプリートには、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');
        }
    });

});

助けてくれる人に感謝します！

4

0 に答える 0