ドロップダウンからリンクをクリックし、ライブ検索でテキストボックスに表示して削除したときの値を削除する方法

Question

これは私の最善の説明です： 現在の場所のデフォルト値を持つ検索バーを構築したいと考えています。

 <div class="input-group col-sm-12"> 
     <label class="control-label" for="city"><h4>City</h4></label> 
     <div class="inner-addon left-addon"> 
      <i class="glyphicon glyphicon-map-marker"></i> 
      <input type="text" class="form-control input-lg city" id="city" 
value="Current Location" name="city" autocomplete="off"> 
     </div> 
     <div id="here"></div> 
    </div> 

を次のように私の入力フィールドがある私は、ユーザーがテキストの外をクリックした場合ので、テキストボックスに「現在の場所」のデフォルト値を維持するために以下のコードを使用しています空の場合は "現在位置"の値がテキストボックスに入力されます。この部分は素晴らしい作品です。テキストボックスが空のときに '現在の場所'を表示します。

$('input.city').on('focus', function() { 
      // On first focus, check to see if we have the default text saved 
      // If not, save current value to data() 
      if (!$(this).data('defaultText')) $(this).data('defaultText', 
    $(this).val()); 

      // check to see if the input currently equals the default before 
    clearing it 
      if ($(this).val() == $(this).data('defaultText')) $(this).val(''); 
     }); 
     $('input.city').on('blur', function() { 
      // on blur, if there is no value, set the defaultText 
      if ($(this).val() == '') $(this).val($(this).data('defaultText')); 
     }); 

ユーザーがテキストボックスに場所を入力すると、ライブ検索が実行され、値がドロップダウンボックスに表示されます。私は、私は以下のことをテストするために使用していますテキストファイルを持っている：

<div class="list-group"> 
    <a href="#" class="list-group-item city-link" id="1">San Jose</a> 
    <a href="#" class="list-group-item city-link" id="2">San Juan</a> 
    <a href="#" class="list-group-item city-link" id="3">San Julio</a> 
</div> 

ここ

それもうまく機能し、適切なデータを表示する、のようにドロップダウンが見えるものです。

私は、テキストファイルから値を取得しますが、最終的にデータベースになりますjqueryのを使用しています：私は必要なのは5つ以上の場所がある場合は、それをスクロール可能にすることができることです。

// Live search code for cities on advanced modal 
    $("#city").keyup(function() { 
     if (this.value.length == 0) { 
      document.getElementById("#here").innerHTML = ""; 
      return; 
     } 
     //Return value only after inputting 3 or more letters 
     if (this.value.length < 4) return; 
     //Show the values to the user 
       $("#here").show(); 
       var x = $(this).val(); 
       $.ajax({ 
        type: 'GET', 
        url: 'test2.txt', 
        data: 'q=' + x, 
        success: function (data) { 
         $("#here").html(data); 
        } 
       }); 
    }); 

何...と私は問題を抱えていますが、私は、ユーザーが入力ボックスに場所を入力できるようにしたいということです、提案は5つの値（リンク）を示し、DIVのドロップダウンし、その後しています必要に応じてより多くの値をスクロールバーに表示し、ユーザーがこれらのリンクの1つをクリックすると、テキストボックスに値を入力します。彼らが心を変えて入力ボックスの値を削除すると、デフォルト値のCurrent locationが入力に入力されます。私の現在の設定では、テキストボックスの値の削除を開始するときに、ドロップダウンリストも更新されません。すべての提案は非常に高く評価されます。 私はJqueryでプロではなく、私はすべての批判を歓迎します。 ありがとうございます！

Answer 1

$("#city").keyup(function() { 
    if (this.value.length == 0) { 
     document.getElementById("#here").innerHTML = ""; 
     this.value = "Current Location"; 
     return; 
    } 
    //Return value only after inputting 3 or more letters 
    if (this.value.length < 4) return; 
    //Show the values to the user 
      $("#here").show(); 
      var x = $(this).val(); 
      $.ajax({ 
       type: 'GET', 
       url: 'test2.txt', 
       data: 'q=' + x, 
       success: function (data) { 
        $("#here").html(data); 
       } 
      }); 
}); 

ここでは、このコードを試すことができます。テキストボックスからすべてのテキストを削除すると長さが0になるので、デフォルト値をCurrent Locationに設定することができます。

はそれを試してみてください、それはかもしれないのに役立ちます:)