ここから本文です

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js...

ten********さん

2017/9/1000:22:52

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.ui-menu {
bo

rder: 1px solid #ddd;
background: #fff;
list-style-type: none;
padding: 5px 10px;
width: 690px;
overflow: hidden;
margin: 0 auto;
z-index: 2;
}
.ui-menu-item:hover {
background: #f2f2f2;
cursor: pointer;
margin: 0 auto;
z-index:2;

}
.ui-autocomplete{
max-height: 200px;
overflow-x: hidden;
overflow-y: scroll;
z-index: 2;
}
.
</style>
<script>
$(function() {

var name = [
'コンビニ','スマホ','Line', 'Line','Line',
];

$('#search').autocomplete({
source: name,
change: function(event, ui) {
console.log('change');
},
close: function(event, ui) {
console.log('close');
},
create: function(event, ui) {
console.log('create');
},
focus: function(event, ui) {
console.log('focus');
},
open: function(event, ui) {
console.log('open');
},
response: function(event, ui) {
console.log('response');
},
search: function(event, ui) {
console.log('search');
},
select: function(event, ui) {
console.log('select');
},
});
});
</script>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img src="https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_c..." height="110" width="300">
<p><input type="text" id="search" style="width:700px;height:35px; box-shadow:1px 1px 1px 1px;
border:1px solid #9CA7E2;"></p>



</center>

<center>

<button type="button"onclick="window.open('/2017/')" style="background-color:white;z-index: 1;"
onmouseover="this.style.background='steelblue'"onmouseout="this.style.background='white'"><font size="3">検索</font></button>
</center>


上記のコードなのですが、UIの自動入力候補がボタンの下に表示されるので、ボタンの上に重ねて表示させたいです。
よろしくお願いします。

閲覧数:
76
回答数:
1
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

kik********さん

2017/9/1319:03:08

自動入力候補が表示された時に、
検索ボタンの上層部にそれを置きたい。

そういうことで「z-index」を用いることで
実現させようとしているものと思われます。

ですが、その方法ではできないと思います。
たとえ、次のようにしようとも。

z-index:10000 !important;

これほどの上位に設定しても、
検索ボタンが表示されてしまうのです。

それで、一工夫を考えました。

自動入力候補が表示されている状態では、
検索ボタンが必要ありませんから、
テキストボックスへの入力操作の最中は
検索ボタンを非表示にしてしまったらよいのでは、と。

<style>
.ui-menu {
border: 1px solid #ddd;
background: #fff;
list-style-type: none;
padding: 5px 10px;
width: 690px;
overflow: hidden;
margin: 0 auto;
}
.ui-menu-item:hover {
background: #f2f2f2;
cursor: pointer;
margin: 0 auto;
}
.ui-autocomplete{
max-height: 200px;
overflow-x: hidden;
overflow-y: scroll;

/* 追加 */
margin-top: -50px;
background-color: #cdcdcd;
}
body {
padding-bottom: 200px;
}
.container {
margin: 0px auto;
width: 770px;
text-align: center;
border: 1px solid #cdcdcd;
}
#googleIMG {
height: 110px;
width : 300px;
}
#btn7 {/* 検索ボタン */
background-color: white;
font-size: 16px;
}
#btn7:hover {
background: steelblue;
}
</style>

<div class="container">
<img id="googleIMG"
src="https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_c...">

<!-- オートコンプリート機能を適用するテキストボックス -->
<p><input type="text" id="search"
style="width:700px;height:35px; box-shadow:1px 1px 1px 1px;
border:1px solid #9CA7E2;"></p>

<button id="btn7" type="button" onclick="window.open('/2017/')">検索</button>
</div>

<script>
$(function() {
//-----------------------------------------
// 検索ボタンの表示・非表示を操作
//-----------------------------------------
$('#search').on('click',function(){
$('#btn7').hide();
});

$('#googleIMG').on('click',function(){
$('#btn7').show();
});
//-----------------------------------------

//入力候補
var name = [
'コンビニ','スマホ','Line1', 'Line2','Line3'
];

$('#search').autocomplete({
source: name,
change: function(event, ui) {
console.log('change');
},
close: function(event, ui) {
console.log('close');
},
create: function(event, ui) {
console.log('create');
},
focus: function(event, ui) {
console.log('focus');
},
open: function(event, ui) {
console.log('open');
},
response: function(event, ui) {
console.log('response');
},
search: function(event, ui) {
console.log('search');
},
select: function(event, ui) {
console.log('select');
}
});

});
</script>

お試しになってみてください。

この回答は投票によってベストアンサーに選ばれました!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる