使用Google地图中的地址自动填充文本框 [英] Using the addresses from Google Maps to autocomplete a textbox

问题描述

我有一个文本框供用户输入他的地址，我需要使用谷歌地图数据库中的地址自动完成文本框，我不知道该怎么做，我是学生，这个是我的任务，这是我的任务。这是我的View / _EditCreatePartial.cshtml中的代码：

 @model PrjctMngmt.Models.Conference 
 
< script type =text / javascript > 
 $（function（）{
 $（。datetimepicker）。datetimepicker（{
 timeFormat：'hh：mm：ss'，
 dateFormat：'dd-mm- yy'
}）; 
 $（。timepicker）。timepicker（{
 timeFormat：'hh：mm：ss'
}）; 
}） ; 
< / script> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（＃editor）。markItUp（mySettings）; 
}）; 
 
< / script> 
 
 @using（Html.BeginForm（））{
 @ Html.ValidationSummary（true）
 
< fieldset> 
< legend>会议< / legend> 
 
< div class =editor-label> 
 @ Html.LabelFor（model => model.Name）
< / div> 
< div class =editor-field> 
 @ Html.EditorFor（model => model.Name）
 @ Html.ValidationMessageFor（model => model.Name）
< / div> 
 
< div class =editor-label> 
 @ Html.LabelFor（model => model.Date）
< / div> 
< div class =editor-field> 
 @ Html.TextBoxFor（model => model.Date，new {@class =datetimepicker}）
 @ Html.ValidationMessageFor（model => model.Date）
< / DIV> 
 
< div class =editor-label> 
 @ Html.LabelFor（model => model.Duration）
< / div> 
< div class =editor-field> 
 @ Html.TextBoxFor（model => model.Duration，new {@class =timepicker}）
 @ Html.ValidationMessageFor（model => model.Duration）
< / DIV> 
 
< div class =editor-label> 
 @ Html.LabelFor（model => model.Description）
< / div> 
< div class =editor-field> 
 @ Html.TextAreaFor（model => model.Description，new {@cols = 50，@rows = 10，@ id =editor}）（可选）
 @ Html.ValidationMessageFor（model => model.Description）
< / div> 
 
< div class =editor-label> 
 @ Html.LabelFor（model => model.Address）
< / div> 
< div class =editor-field> 
 @ Html.EditorFor（model => model.Address）
 @ Html.ValidationMessageFor（model => model.Address）
< / div> 
 
< div class =editor-label> 
 @ Html.LabelFor（model => model.Country）
< / div> 
< div class =editor-field> 
 @Html.EditorFor（model => model.Country）
 @ Html.ValidationMessageFor（model => model.Country）
< / div> 
 
< div class =editor-label> 
联系电话
< / div> 
< div class =editor-field> 
 @ Html.EditorFor（model => model.ContactPhone）
 @ Html.ValidationMessageFor（model => model.ContactPhone）
< / div> 
 
< div class =editor-label> 
 @ Html.LabelFor（model => model.Organizer）
< / div> 
< div class =editor-field> 
 @Html.EditorFor（model => model.Organizer）
 @ Html.ValidationMessageFor（model => model.Organizer）
< / div> 
 
< div class =editor-label> 
 @ Html.LabelFor（model => model.Room）
< / div> 
< div class =editor-field> 
 @Html.EditorFor（model => model.Room）
 @ Html.ValidationMessageFor（model => model.Room）
< / div> 
< p> 
< input type =submitvalue =创建/> 
< / p> 
< / fieldset> 
} 
 
< div> 
 @ Html.ActionLink（返回列表，索引）
< / div> 

解决方案

< blockquote>（function（）{

（。datetimepicker）。datetimepicker（{
timeFormat：'hh：mm：ss'，
dateFormat：'dd -mm-yy'
}）;

（。timepicker）。timepicker（{
timeFormat：'hh：mm：ss'
}）;
}）;
< / script>

< script type =text / javascript>

I have a text-box for a user to enter his address and I need the text-box to be autocompleted with the addresses from the google maps database and Im not sure how to do this, I'm a student and this is for my assignment and this is my task. This is the code in my View/_EditCreatePartial.cshtml:

@model PrjctMngmt.Models.Conference

<script type="text/javascript">
    $(function () {
        $(".datetimepicker").datetimepicker({
            timeFormat: 'hh:mm:ss',
            dateFormat: 'dd-mm-yy'
        });
        $(".timepicker").timepicker({
            timeFormat: 'hh:mm:ss'
        });
    });
</script>

<script type="text/javascript" >
    $(document).ready(function () {
        $("#editor").markItUp(mySettings);
    });

</script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
   
    <fieldset>
        <legend>Conference</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Date)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Date, new { @class = "datetimepicker" })
            @Html.ValidationMessageFor(model => model.Date)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Duration)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Duration, new { @class = "timepicker" })
            @Html.ValidationMessageFor(model => model.Duration)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Description, new { @cols = 50, @rows = 10, @id = "editor" }) (optional)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Country)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Country)
            @Html.ValidationMessageFor(model => model.Country)
        </div>

        <div class="editor-label">
            Contact phone
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactPhone)
            @Html.ValidationMessageFor(model => model.ContactPhone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Organizer)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Organizer)
            @Html.ValidationMessageFor(model => model.Organizer)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Room)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Room)
            @Html.ValidationMessageFor(model => model.Room)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

解决方案

(function () {

(".datetimepicker").datetimepicker({ timeFormat: 'hh:mm:ss', dateFormat: 'dd-mm-yy' });

(".timepicker").timepicker({ timeFormat: 'hh:mm:ss' }); }); </script> <script type="text/javascript" >

这篇关于使用Google地图中的地址自动填充文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！