Автозаполнение JavaScript - скрыть и показать Div

-1

В настоящее время у меня есть рабочий код для автозаполнения Javascript, который перенаправляет пользователя на определенную веб-страницу в зависимости от того, что они набирают в поле ввода.Автозаполнение JavaScript - скрыть и показать Div

Однако я пытаюсь использовать acomplsih функцию, где один div скрыт, и один div появляется в зависимости от того, что они набирают в поле ввода.

Например, если они набрали Spencer Kline в поле ввода, я хочу, чтобы «div1» исчез, и появится «div2».

настоящее время у меня этот код:

<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
</head> 
<body> 
<script> 
$(document).ready(function() { 
    $("input#autocomplete").autocomplete({ 
    source: [{ 
     label: "Spencer Kline" 
     }, { 
     value: "www.example.com", 
     label: "James Bond" 
     } 

    ], 
    select: function(event, ui) { 
     window.location.href = ui.item.value; 
    } 
    }); 
}); 
</script>  
<input type="text" id="autocomplete" style="width: 75%;"> 
</body> 
</html>

источник

2015-10-11 Barbra. Higgins

- это div1 и div2 на текущей странице или на www.foo.com/ru www.example.com? – Julien

Они находятся на текущей странице. –

Ваш пост не так уж ясен. Просто, чтобы попытаться сделать вещи более ясными ... вы хотите, чтобы div изменился после того, как пользователь выбрал «Spencer Kline» или когда они печатают? В настоящее время, когда это значение выбрано, оно перенаправляется, поэтому я полагаю, что это должно быть, поскольку они печатают «Spencer Kline» в поле ...? –

Вы могли:

$(document).ready(function() { 
    $("input#autocomplete").autocomplete({ 
    source: [{ 
     value: "www.foo.com", 
     label: "Spencer Kline" 
     }, { 
     value: "www.example.com", 
     label: "James Bond" 
     } 

    ], 
    select: function(event, ui) { 
     if (ui.item.label == "Spencer Kline") { 
     $("#div1").show(); 
     $("#div2").hide(); // or whatever 
     } 
     window.location.href = ui.item.value; 
    } 
    }); 
});

Но это не имеет никакого смысла, так как мы бросить текущую страницу с window.location.href = ui.item.value;.

источник

2015-10-11 14:30:57 Julien

Как я уже говорил, я не хочу, чтобы пользователь перенаправлялся - я попробую ваше решение. –

просто проверьте мои изменения. Я ошибся в первую очередь. – Julien

Привет, это решило мою проблему! Я + 1 и отметил его как ответ :) –

Так что для демонстрации я добавил в два div для вас.

Как вы уже упоминали, вы не хотите, чтобы их перенаправляли на выбор ... поэтому вам нужно проверить, какие значения имеют метки, и если они соответствуют критериям, просто используйте JQuery для манипулировать CSS div, как показано ниже.

Вы можете добавить свои собственные правила или стили CSS для каждого div, чтобы скрыть или показать их по своему усмотрению.

<html> 
<head> 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

</head> 
<body> 
    <div id = "div1"> 
    some div 1 content here... 
    </div> 

    <div id = "div2"> 
    some div 2 content here... 
    </div> 

    <input type="text" id="autocomplete" style="width: 75%;"> 
</body> 

</html> 

<script> 
    $(document).ready(function() { 

    $("input#autocomplete").autocomplete({ 

     source : [{ 
      value : "www.foo.com", 
      label : "Spencer Kline" 
     }, 
     { 
      value : "www.example.com", 
      label : "James Bond" 
     }], 
     select: function(event, ui) { 

     if(ui.item.label === "Spencer Kline"){ 

      $("#div1").css("display", 'none'); 

     } 

     } 

    }); 

    }); 
</script>

источник

2015-10-11 14:33:35

Автозаполнение JavaScript - скрыть и показать Div

ответ

Смежные вопросы