GreenTree.Strohrmann.ERP/GreenTree.Strohrmann.ERP.Web/Views/Customer/_SearchCustomerPartial.cshtml

@model GreenTree.Strohrmann.ERP.Web.Models.Search.ICustomerSearchable

@{ 
	var partialId = Html.RandomId();
}

<script type="text/javascript">

    @{ 
        <text>
        $(document).ready(function () {
            $("#text_@partialId").on('keypress', function (e) {
                if (e.keyCode == 13) {
                    search_@partialId ();
                    e.preventDefault();
                };
            });
            $("#text_@partialId").on('keydown', function (e) {
                if (e.keyCode == 8 && $("#value_@partialId").val() != "") {
                    $("#text_@partialId").val("");
                    $("#value_@partialId").val("");
                    e.preventDefault();
                };
            });
        });

        function search_@partialId () {
            $.ajax({
                method: "POST",
                url: "@Url.Action("Search", "Customer")",
                data: {
                    SearchTerm: $("#text_@partialId").val()
                },
                success: function (data) {
                    $("#searchCustomerModal_@partialId").find(".list-group").empty();
                    if (data.length > 0) {
                        $(data).each(function (index, elem) {
                            $("#searchCustomerModal_@partialId").find(".list-group").append(
                                '<a href="#" class="list-group-item list-group-item-info list-group-item-action" ' +
                                'data-toggle="list" data-val="{0}" data-text="{1}">{1} ({2})</a>'
                                    .format(elem.id, elem.fullname, elem.localAddress));
                            $("#searchCustomerModal_@partialId").find(".list-group").append(
                                '<a href="#" class="list-group-item list-group-item-info list-group-item-action" ' +
                                'data-toggle="list" data-val="{0}" data-text="{1}">{1} ({2})</a>'
                                    .format(elem.id, elem.fullname, elem.localAddress));
                            $("#searchCustomerModal_@partialId").find(".list-group").append(
                                '<a href="#" class="list-group-item list-group-item-info list-group-item-action" ' +
                                'data-toggle="list" data-val="{0}" data-text="{1}">{1} ({2})</a>'
                                    .format(elem.id, elem.fullname, elem.localAddress));
                        });
                    } else {
                        $("#searchCustomerModal_@partialId").find(".list-group").append(
                            '<button type="button" class="list-group-item">Keine Treffer</button>');
					}
                    $("#searchCustomerModal_@partialId").modal("show");
                },
                error: function (msg) {

                }
            });
        }

        function select_@partialId () {
            $("#searchCustomerModal_@partialId").modal("hide");
            var val = $("#searchCustomerModal_@partialId").find("a.active").attr("data-val");
            var text = $("#searchCustomerModal_@partialId").find("a.active").attr("data-text");
            $("#value_@partialId").val(val);
            $("#text_@partialId").val(text);
	    }
            
        </text>
    }

</script>

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-info fas fa-search" type="button" onclick="search_@partialId ()"></button>
    </div>
    <input id="text_@partialId" type="text" class="form-control" placeholder="Suchbegriff" aria-label="Suchbegriff" aria-describedby="basic-addon1">
</div>

<input id="value_@partialId" type="hidden" asp-for="CustomerId" />

<div id="searchCustomerModal_@partialId" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Suchergebnisse</h4>
            </div>
            <div class="modal-body">
                <div class="list-group">
                </div>
            </div>
            <div class="modal-footer">
                <div class="btn btn-secondary" data-dismiss="modal">Schließen</div>
                <div class="btn btn-success" onclick="select_@partialId ()">Auswählen</div>
            </div>
        </div>
    </div>
</div>