0

http://xilinus.com/jquery-addresspicker/demos/index.htmlの addresspicker を使用して、開発中のアドレス フォームをオートコンプリートしたいと考えています。

私はWeb開発にまったく慣れていないので、フォーム検証用のいくつかのクエリプラグインと正常に機能する日付ピッカーでTwitterブートストラップを使い始めましたが、アドレスピッカーを自分のページに組み込む方法がわからないので、コールバック関数を使用してフォームの住所部分に入力します。

誰かが私を助けてくれるか、正しい方向に向けてくれますか. この例https://github.com/elmariachi111/jquery-addresspickerにも出くわしましたが、フォームセクションは含まれていません。

これまでの私のコードは次のとおりです。

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8" />  
    <title>Add a member</title>  
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">

    <style type="text/css">

      /* Sticky footer styles
      -------------------------------------------------- */

      .top-margin
      {
        margin-top: 20px;
      }

      .help-inline {
        color: #FF0000;
      }

    </style>

    </head>
    <body>
    <div class="container top-margin"> <div class="well text-center"><h1 class="muted">Add     a member</h1></div></div>
 <div class="container">
    <div class="well">
      <form id="signup" class="form-horizontal" method="post" action="success.php">
        <legend>Member entry</legend>
        <div class="control-group">
            <label class="control-label">First Name</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input type="text" class="input-xlarge" id="fname" name="fname" placeholder="first name">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group ">
            <label class="control-label">Last Name</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input type="text" class="input-xlarge" id="lname" name="lname" placeholder="last name">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group">
            <label class="control-label">Email</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input type="text" class="input-xlarge" id="email" name="email" placeholder="email">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group">
            <label class="control-label">Home Telephone</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-phone"></i></span>
                    <input type="text" class="input-xlarge" id="telephone" name="telephone" placeholder="home number">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group">
            <label class="control-label">Mobile Number</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-mobile-phone"></i></span>
                    <input type="text" class="input-xlarge" id="mobile" name="mobile" placeholder="mobile number">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group">
            <label class="control-label">Join Date</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-calendar"></i></span>
                    <input type="text" class="span2" id="jdate"  name="jdate" placeholder="dd-mm-yyyy">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group">
            <label class="control-label">Date of Birth</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-calendar"></i></span>
                    <input type="text" class="span2" id="dofb" value="01-01-1980" name="dofb" placeholder="dd-mm-yyyy">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group ">
            <label class="control-label">Proposed By</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <select class="span2" name="pby">
                      <option selected>-</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                      <option>6</option>
                      <option>7</option>
                      <option>8</option>
                      <option>9</option>
                      <option>10</option>
                    </select>
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group ">
            <label class="control-label">Seconded By</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <select class="span2" name="sby">
                      <option selected>-</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                      <option>6</option>
                      <option>7</option>
                      <option>8</option>
                      <option>9</option>
                      <option>10</option>
                    </select>
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group">
            <label class="control-label">Gender</label>
            <div class="controls">
                <div id="gender" name="gender" class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-primary">Male</button>
                <button type="button" class="btn btn-primary">Female</button>
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group">
            <label class="control-label">BCF</label>
            <div class="controls">
                    <input type="checkbox" id="bcf" value="bcf" name="bcf">
            </div>
        </div> <!-- Control-group -->

        <legend>Address</legend>

        <div class="control-group ">
            <label class="control-label">Address Line 1</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-home"></i></span>
                    <input type="text" class="input-xlarge" id="addressl1" name="addl1" placeholder="address line 1">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group ">
            <label class="control-label">Address Line 2</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-home"></i></span>
                    <input type="text" class="input-xlarge" id="addl2" name="addl2" placeholder="address line 2">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group ">
            <label class="control-label">City</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-home"></i></span>
                    <input type="text" class="input-xlarge" id="city" name="city" placeholder="city">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group ">
            <label class="control-label">County</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-home"></i></span>
                    <input type="text" class="input-xlarge" id="county" name="county" placeholder="county">
                </div>
            </div>
        </div> <!-- Control-group -->
        <div class="control-group ">
            <label class="control-label">Post Code</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-home"></i></span>
                    <input type="text" class="input-medium" id="pcode" name="pcode" placeholder="post code">
                </div>
            </div>
        </div> <!-- Control-group -->

        <div class="control-group">
        <label class="control-label"></label>
          <div class="controls">
           <button type="submit" class="btn btn-success" >Create Member</button>
          </div>
        </div> <!-- Control-group -->
      </form>
    </div>
</div>

  <!-- Javascript placed at the end of the file to make the  page load faster -->
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="js/bootstrap-datepicker.js"></script> 
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>


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

            $("#signup").validate({
                rules:{
                    gender:"required",
                    fname:"required",
                    lname:"required",
                    email:{
                            required:true,
                            email: true
                        }
                },
                messages: {
                     email:{
                            email: "Please enter a valid email address"
                        }
                },

                errorClass: "help-inline"

            });

        });

        $('#jdate').datepicker({
            format: 'dd-mm-yyyy',
            todayBtn: 'linked'
        });
        $('#dofb').datepicker({
            format: 'dd-mm-yyyy',
            todayBtn: 'linked'
        });


</script>


</body>
</html>

あなたが私に与えることができるどんな助けにも感謝します... ルーク

4

1 に答える 1

0

次のことを頭に入れます。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="jquery.ui.addresspicker.js"></script>

        <script>
         $( "#addressl1" ).addresspicker();
        </script>

jquery.ui.addresspicker.js をダウンロードして、index.html と同じフォルダーに配置してください。

于 2013-05-12T00:43:52.840 に答える