Bootstrap Typeahead работает только в два клика в моем сценарии и требует динамической работы для 20 строк - PullRequest
Новая
       33

Bootstrap Typeahead работает только в два клика в моем сценарии и требует динамической работы для 20 строк

0 голосов
/ 24 августа 2018

Вот примеры кода моего реального сценария.Мне нужно звонить typeahead только при нажатии один раз на кнопку показа. JSFiddle
Ниже внизу находится моя HTML таблица. 

<table border="1" cellpadding="5" cellspacing="0" style="width: 100%">
    <tr>
        <td>City 1:</td>
        <td>
            <input id="city1"></input>
            <button id="myButton1">Show</button>
            <button id="clear1">Clear</button>
        </td>
    </tr>
    <tr>
        <td>City 2:</td>
        <td>
            <input id="city2"></input>
            <button id="myButton2">Show</button>
            <button id="clear2">Clear</button>
        </td>
    </tr>
</table>

Я использую начальный тип начальной загрузки, это то, что находится внутри <head>. 

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/3.1.0/bootstrap3-typeahead.js"></script>

Затем есть моя jQuery функция, используемая для отображения списка городов при нажатии кнопки «показать» и при нажатии «очистить»: уничтожить ранее инициализированный заголовок типа.Это работает только тогда, когда я дважды щелкаю кнопку показать.Я должен сделать эту работу одним нажатием кнопки. 

$('#myButton1').click(function() {
    $('#city1').trigger('keyup');
    $('#city1').focus();
    $('#city1').typeahead({
        source : [ 'Alabama', 'Alaska','Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ],
        autoSelect : false,
        items : 1000,
        minLength : 0
    });
});

$('#clear1').click(function() {
    $('#city1').val('');
    $('#city1').typeahead('destroy');
});
//trigger the typeahead
$('#myButton2').click(function() {
    $('#city2').trigger('keyup');
        $('#city2').focus();
        $('#city2').typeahead({
        source : [ 'Alabama', 'Alaska','Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ],
        autoSelect : false,
        items : 1000,
        minLength : 0
    });
});
$('#clear2').click(function() {
    $('#city2').val('');
    $('#city2').typeahead('destroy');
});

Ответы [ 5 ]

0 голосов
/ 03 сентября 2018

как K Scandrett упомянуто Чтобы исправить необходимость дважды щелкнуть кнопку Показать, переместите .trigger () и .focus () после .typeahead ()

то есть 

$('#city1').typeahead({...});
$('#city1').trigger('keyup');
$('#city1').focus();

Вторая часть

работает только с кнопкой показа, мы отключим ее, пока пользователь изменяет ввод 

$("#city1").on("input propertychange",function(){
$('#city1').typeahead('destroy');
    });

jsfiddle

0 голосов
/ 27 августа 2018

Вы должны вызвать событие click для сценария заголовка, чтобы вызвать список показа в поле ввода, используя событие .trigger().

Ниже приведен ответ на ваш второй вопрос, чтобы вызывать заголовок только один раз, когда нажимается кнопка показа.Пожалуйста, проверьте https://jsfiddle.net/manishjethva/thmr9k2L/8/ для более подробной информации.

$('body').data("btn1",true);
$('#myButton1').click(
                function() {
            var btn1 = $('body').data("btn1");
                    if(btn1 === false){
            alert('typeahead calls only once, clear to call again.');
            return;
          }
                    $('#city1')
                            .typeahead(
                                    {
                                        source : [ 'Alabama', 'Alaska',
                                                'Arizona', 'Arkansas',
                                                'California', 'Colorado',
                                                'Connecticut', 'Delaware',
                                                'Florida', 'Georgia', 'Hawaii',
                                                'Idaho', 'Illinois', 'Indiana',
                                                'Iowa', 'Kansas', 'Kentucky',
                                                'Louisiana', 'Maine',
                                                'Maryland', 'Massachusetts',
                                                'Michigan', 'Minnesota',
                                                'Mississippi', 'Missouri',
                                                'Montana', 'Nebraska',
                                                'Nevada', 'New Hampshire',
                                                'New Jersey', 'New Mexico',
                                                'New York', 'North Carolina',
                                                'North Dakota', 'Ohio',
                                                'Oklahoma', 'Oregon',
                                                'Pennsylvania', 'Rhode Island',
                                                'South Carolina',
                                                'South Dakota', 'Tennessee',
                                                'Texas', 'Utah', 'Vermont',
                                                'Virginia', 'Washington',
                                                'West Virginia', 'Wisconsin',
                                                'Wyoming' ],
                                        autoSelect : false,
                                        items : 1000,
                                        minLength : 0

                                    });
             $('#city1').trigger('keyup');  
             $('#city1').focus();   
             $('body').data("btn1",false);
                });

        $('#clear1').click(function() {
            $('#city1').val('');
            $('#city1').typeahead('destroy');
      $('body').data("btn1",true);

        });
0 голосов
/ 27 августа 2018

Вместо этого вы можете использовать HTML Datalist.Проверьте код ниже:

<!doctype html>
<html>
<head>
<title>Example 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("#search").on("input", function(e) {
		var val = $(this).val();
		if(val === "") return;
		//You could use this to limit results
    var countries= ['Alabama', 'Alaska',
                                                'Arizona', 'Arkansas',
                                                'California', 'Colorado',
                                                'Connecticut', 'Delaware',
                                                'Florida', 'Georgia', 'Hawaii',
                                                'Idaho', 'Illinois', 'Indiana',
                                                'Iowa', 'Kansas', 'Kentucky',
                                                'Louisiana', 'Maine',
                                                'Maryland', 'Massachusetts',
                                                'Michigan', 'Minnesota',
                                                'Mississippi', 'Missouri',
                                                'Montana', 'Nebraska',
                                                'Nevada', 'New Hampshire',
                                                'New Jersey', 'New Mexico',
                                                'New York', 'North Carolina',
                                                'North Dakota', 'Ohio',
                                                'Oklahoma', 'Oregon',
                                                'Pennsylvania', 'Rhode Island',
                                                'South Carolina',
                                                'South Dakota', 'Tennessee',
                                                'Texas', 'Utah', 'Vermont',
                                                'Virginia', 'Washington',
                                                'West Virginia', 'Wisconsin',
                                                'Wyoming'];
			var dataList = $("#searchresults");
			dataList.empty();
				for(var i=0, len=countries.length; i<len; i++) {
					var opt = $("<option></option>").attr("value", countries[i]);
					dataList.append(opt);
				}
	});
})
</script>	
</head>

<body>

<p>
  <table border="1" cellpadding="5" cellspacing="0" style="width: 100%">
            <tr>
                <td>City 1:</td>
                <td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off"></td>
            </tr>

            <tr>
                <td>City 2:</td>
                <td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off"></td>
                 </tr>
                  <tr>
                  <td>City 3:</td>
                <td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off"></td>
                 </tr>
                  <tr>
                  <td>City 4:</td>
                <td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off"></td>
            </tr>
        </table>
	<datalist id="searchresults"></datalist>
</p>

</body>
</html>
0 голосов
/ 27 августа 2018

Чтобы исправить необходимость дважды щелкнуть кнопку Показать, переместите .trigger() и .focus() после .typeahead()

, т. Е. 

$('#city1').typeahead({...});
$('#city1').trigger('keyup');
$('#city1').focus();

Обновленная скрипка: https://jsfiddle.net/5o8srLkm/

Для кода, который работает с любым количеством строк, я предлагаю добавить CSS-классы в HTML.Это помогает найти связанное поле ввода нажатой кнопки, используя jQuery prevAll .

(я также уничтожаю .typeahead() перед его созданием - если оно уже существует для поля ввода) 

$('.btnShow').click(
  function() {

    var $cityInput = $(this).prevAll('.cityInput'); // find the input associated with this button

    $cityInput
      .typeahead('destroy')
      .typeahead({
        source: ['Alabama', 'Alaska',
          'Arizona', 'Arkansas',
          'California', 'Colorado',
          'Connecticut', 'Delaware',
          'Florida', 'Georgia', 'Hawaii',
          'Idaho', 'Illinois', 'Indiana',
          'Iowa', 'Kansas', 'Kentucky',
          'Louisiana', 'Maine',
          'Maryland', 'Massachusetts',
          'Michigan', 'Minnesota',
          'Mississippi', 'Missouri',
          'Montana', 'Nebraska',
          'Nevada', 'New Hampshire',
          'New Jersey', 'New Mexico',
          'New York', 'North Carolina',
          'North Dakota', 'Ohio',
          'Oklahoma', 'Oregon',
          'Pennsylvania', 'Rhode Island',
          'South Carolina',
          'South Dakota', 'Tennessee',
          'Texas', 'Utah', 'Vermont',
          'Virginia', 'Washington',
          'West Virginia', 'Wisconsin',
          'Wyoming'
        ],
        autoSelect: false,
        items: 1000,
        minLength: 0

      });

    $cityInput
      .trigger('keyup')
      .focus();
  });

$('.btnClear').click(function() {

  var $cityInput = $(this).prevAll('.cityInput'); // find the input associated with this button

  $cityInput
    .val('')
    .typeahead('destroy');
});

...
    <tr>
      <td>City 1:</td>
      <td>
        <input id="city1" class="cityInput" />
        <button class="btnShow">Show</button>
        <button class="btnClear">Clear</button></td>
    </tr>

    <tr>
      <td>City 2:</td>
      <td>
        <input id="city2" class="cityInput" />
        <button class="btnShow">Show</button>
        <button class="btnClear">Clear</button></td>
    </tr>
...

Примечание <input /> не нуждается в закрывающем теге

Fiddle: https://jsfiddle.net/p90nv67g/

0 голосов
/ 27 августа 2018

Вы запускаете keyup перед инициализацией typeahead и, следовательно, он не отображается в первый раз. Выполните инициализацию до, а затем активируйте ее, и все готово. 

 function() {

                    $('#city1').focus();
                    $('#city1')
                            .typeahead(
                                    {
                                        source : [ 'Alabama', 'Alaska',
                                                'Arizona', 'Arkansas',
                                                'California', 'Colorado',
                                                'Connecticut', 'Delaware',
                                                'Florida', 'Georgia', 'Hawaii',
                                                'Idaho', 'Illinois', 'Indiana',
                                                'Iowa', 'Kansas', 'Kentucky',
                                                'Louisiana', 'Maine',
                                                'Maryland', 'Massachusetts',
                                                'Michigan', 'Minnesota',
                                                'Mississippi', 'Missouri',
                                                'Montana', 'Nebraska',
                                                'Nevada', 'New Hampshire',
                                                'New Jersey', 'New Mexico',
                                                'New York', 'North Carolina',
                                                'North Dakota', 'Ohio',
                                                'Oklahoma', 'Oregon',
                                                'Pennsylvania', 'Rhode Island',
                                                'South Carolina',
                                                'South Dakota', 'Tennessee',
                                                'Texas', 'Utah', 'Vermont',
                                                'Virginia', 'Washington',
                                                'West Virginia', 'Wisconsin',
                                                'Wyoming' ],
                                        autoSelect : false,
                                        items : 1000,
                                        minLength : 0
                                        });
 $('#city1').trigger('keyup');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...