I have a list of options that I can select, at the beginning it looks like this:
so when I write something, it starts looking, it goes like this:
but when I delete the writing, the list is not hidden, it remains open, as follows:
the main code is as follows:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head><!-- Created by Artisteer v4.0.0.58475 -->
<meta charset="utf-8">
<title>Registro Mantenimiento</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<script type="text/javascript" src="js/completar_formulario.js"></script>
<script type="text/javascript" src="js/completar_formulario2.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/sc.js"></script>
<script type="text/javascript" src="js/sc2.js"></script>
</head>
<body>
<span class="pull-right">
<a href="#" class='btn btn-default' title='Editar producto' data-toggle="modal" data-target="#myModal7"><i class="glyphicon glyphicon-edit">
</i></a>
<div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class='glyphicon glyphicon-edit'></i> Editar Incidencia</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="post" id="editar_producto3" name="editar_producto3">
<div id="resultados_ajax4"></div>
<div class="form-group">
<div class="form-group">
<label for="nombre_f" class="col-sm-3 control-label">Site</label>
<div class="col-sm-8">
<input class="form-control" type="hidden" name="id" id="id" value="">
<input class="form-control" type="text" name="nombre_f" id="nombre_f" placeholder="Ingrese ID del SITE" onkeyup="autocompletar();" autocomplete="off" onChange="es_vacio()" >
<ol id ="lista" onclick="completar_formulario()"></ol>
</div>
</div>
<div class="form-group">
<label for="nombre_region" class="col-sm-3 control-label">NOMBRE DEL SITE: </label>
<div class="col-sm-8">
<input class="form-control" type="hidden" name="id2" id="id2" value="">
<input class="form-control" type="text" name="nombre_region" id="nombre_region" placeholder="Ingrese ID del SITE" onkeyup="autocompletar2();" autocomplete="off" onChange="es_vacio()">
<!---->
<ol id ="lista2" onclick="completar_formulario2()"></ol>
</div>
</div>
<div class="form-group">
<label for="sistema_enfriamiento_1" class="col-sm-3 control-label">DEPARTAMENTO: </label>
<div class="col-sm-8">
<input type="text" id="sistema_enfriamiento_1" name="sistema_enfriamiento_1" class="form-control" placeholder="Ingrese un valor" >
</div>
</div>
<div class="form-group">
<label for="estado_rectificador_1" class="col-sm-3 control-label">PROVINCIA: </label>
<div class="col-sm-8">
<input type="text" id="estado_rectificador_1" name="estado_rectificador_1" class="form-control" placeholder="Ingrese un valor" >
</div>
</div>
<div class="form-group">
<label for="capacidad_modulos_1" class="col-sm-3 control-label">DISTRITO: </label>
<div class="col-sm-8">
<input type="text" id="capacidad_modulos_1" name="capacidad_modulos_1" class="form-control" placeholder="Ingrese un valor" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary" id="actualizar_datos3">Actualizar datos</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body></html>
and the code js is as follows:
function autocompletar() {
//Aca vamos a realizar la funcion busqueda con Ajax. Llamamos al <id= lista> de la
//busqueda autocompletada.
var min_length = 0; // variable length
var nombre_s = $('#nombre_f').val();//obtener el nombre y/o termino de busqueda
if (nombre_s.length >= min_length) {
$.ajax({
url: 'controlador/proceso_busqueda.php',
type: 'POST',
data: {nombre_s:nombre_s},
success:function(data){
$('#lista').show();//mistrar la lista
$('#lista').html(data);//mostrar resultado de consulta en la lista
}
});
} else {
$('#lista').hide();
}
}
// funcion que setea valores a los input despues de busqueda
function set_item(id,item) {
// setear valor al imput id y nombre
$('#nombre_f').val(item);
$('#id').val(id);
// ocultar la lista
$('#lista').hide();
}
also the list of options that shows undo the next input, in this case is site name, there will be some way for the list to go above the input "name of the site" and hide if I have not written anything? ?