jQuery將附加值添加到html輸入取決於其他輸入

Question

好吧，標題有點混淆，但這是我的困境。我製作了一個網絡應用程序，用於在工作中內部跟蹤UPS包。目前，您輸入了追蹤號碼，然後選擇發貨城市。所有來自賬戶的追蹤號碼都以相同的X數量開始。所以如果有人輸入「1Z8473 ...」到一個輸入中，「TX，Houston」會自動進入下一個輸入。這是一個難以脫身的東西嗎？我會在哪裏開始？

Answer 1

您可以監視一個輸入的變化，然後根據它的內容匹配指定的值，更新第二個。

簡單的例子：

<label for="code">Code:</label> <input type="text" id="code" /> 

<label for="area">Area:</label> <input type="text" id="area" /> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     // Listen for change on our code input 
     $('#code').keyup(function(){ 
      var entered = $(this).val(); // text entered in 'code' 

      // Look up the start of the code (first 6 digits?) 
      if(entered.substring(0,6) == '1Z8473') 
      { 
       // Set the value of our "area" input 
       $('#area').val('Houston, TX'); 
      } 
     }); 
    }); 
</script> 

上面的例子使用一個簡單的if塊做的匹配。正如其他人在此發佈的那樣，您可以將此值發送到服務器端腳本，爲您所需的區域進行地理定位。因此，與一些替代上述if這樣的：

// Look up the area depending on the code entered 
$.getJSON(
    '/geocoder_on_your_site.php?area='+entered, 
    function(data) { 
     $('#area').val(data.location); 
}); 

，並在服務器上，在geocoder_on_your_site.php：

$input = $_REQUEST['entered']; 
// Assume input is sanitised & checked first.. 
... 
// Look up the area base on location 
$data['location'] = look_up_location($input); 

echo json_encode($data); 

Answer 2

你需要一個地理位置API，如this one

然後，你需要使用AJAX調用查詢，並把結果的一部分（城市在這種情況下），在輸入框中。

Here's an example類似的東西，安裝Firebug並觀察它發送的請求。

Source code is here

Answer 3

檢查KEYUP事件，並通過AJAX發送輸入到服務器端工具，看起來數量併發送退城。只需將它添加到輸入的value即可添加。