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

@model GreenTree.Strohrmann.ERP.Web.Models.Shared.SearchModel

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

<script type="text/javascript">

    @{ 
        <text>
        function search_@partialId () {
            $.ajax({
                method: "POST",
                url: "@Url.Action("Search", "Customer")",
                data: {
                    SearchTerm: $("#text_@partialId").val()
                },
                success: function (data) {
                    debugger;
                    $("#searchCustomerModal_@partialId").modal("show");
                    if (data == null) return;
                    $(data).each(function (index, element) {
                        $("#searchCustomerModal_@partialId").find(".list-group").append(
                            '<button type="button" class="list-group-item list-group-item-action">' + element + '</button>');
                    });
                },
                error: function (msg) {

                }
            });
        }
            
        </text>
    }

</script>

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-secondary 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">
    @if (Model == null)
	{ 
        <input id="hiddenValue_@partialId" type="hidden" />
	}
	else
	{
        <input id="hiddenValue_@partialId" type="hidden" name="@Model.ModelPropertyPath" />
	}
</div>

<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="form-group">
                    <label class="control-label"></label>
                    <div class="list-group">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="btn btn-secondary" data-dismiss="modal">Schließen</div>
                <div class="btn btn-success">Auswählen</div>
            </div>
        </div>
    </div>
</div>