Question

就html或ajax或javascript而言，我不是技术人员。但我必须开发一个脚本。我的问题是＆＃34;隐藏＆＃34;我的阿贾克斯没有工作。我有2个文本字段给出搜索结果。我希望在用户搜索另一个搜索建议时隐藏搜索建议（在＆＃34; ul＆＃34;标记中）。

下面给出的是javascript和html

＆＃13;

function autocomplet() {
	var min_length = 0; // min caracters to display the autocomplete
	var keyword = $('#country_id').val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$('#country_list_id').show();
				$('#country_list_id').html(data);
			}
		});
	} else {
		$('#country_list_id').hide();
	}

	document.getElementById('house_list_id').style.display = 'none';
}

function autocomplet_house() {
	
	var min_length = 0; // min caracters to display the autocomplete
	var keyword = $('#house_id').val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh_house.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$('#house_list_id').show();
				$('#house_list_id').html(data);
			}
		});
	} else {
		$('#house_list_id').hide();
	}

	document.getElementById('country_list_id').style.display = 'none';
}

＆＃13;

     <form>
                <div class="label_div">Search Name:&nbsp </div>
                <div class="input_container">
                    <input type="text" id="country_id" name="country_name" autocomplete="off" onkeyup="autocomplet()">
                    <ul id="country_list_id"></ul>
                </div>

                 <div class="label_div">Search House:&nbsp </div>
                <div class="input_container">
                    <input type="text" id="house_id" name="house_name" autocomplete="off" onkeyup="autocomplet_house()">
                    <ul id="house_list_id"></ul>
                </div>
            </form>

＆＃13;

Answer 1

好像你有一个隐藏条件，从未遇到过：

var min_length = 0;

if (keyword.length >= min_length){
    /* keyword is always zero length or greater */
} else {
    /* will never reach here */
}

此外，我想你想隐藏'其他列表'，当显示'当前列表'时...尝试改变你的ajax成功：

success:function(data){
    $('#country_list_id').html(data).show();
    $('#house_list_id').hide();
}

success:function(data){
    $('#house_list_id').html(data).show();
    $('#country_list_id').hide();
}

Answer 2

好的......我一直在思考，并重新安排了一切。

试试这个：

<script>
    function autocomplet(Elm){
        var Name = Elm.attr('name');
        var Word = Elm.val();
        var ListA = $('#'+Name+'_list_id');
        var ListB = Elm.parents('form').find('ul').not(ListA).hide();

        var min = 0; // min caracters to display the autocomplete
        if( Word.length >= min ){
            $.ajax({
                url: 'ajax_refresh_'+Name+'.php',
                type: 'POST',
                data: {Word:Word},
                success:function(data){
                    ListA.empty().html(data).show();
                }
            });
        }
    }
</script>

<form>
    <div class="label_div">Search Name:&nbsp</div>
    <div class="input_container">
        <input type="text" name="country" autocomplete="off" onkeyup="autocomplet($(this));">
        <ul id="country_list_id"></ul>
    </div>
    <div class="label_div">Search House:&nbsp</div>
    <div class="input_container">
        <input type="text" name="house" autocomplete="off" onkeyup="autocomplet($(this));">
        <ul id="house_list_id"></ul>
    </div>
</form>

Answer 3

非常感谢OLA，你给了我一个减少代码冗余的想法。我已经清除了我的浏览历史记录并且有效。

隐藏在Ajax中不起作用

3 个答案: