What I need to know how to clear the textbox if the user type only 1 character and don't select on the list? I also have a ajax in autoplete.php which I need to get the value send to textbox.

This what I have right now.

</script>
function changeAutoComplete (val) {
    $( "#tags" ).autoplete({
        mustMatch: true,
        source: 'autoplete.php?selected='+val,
        response: function(event, ui) {
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
                $(this).val("");
                return false;
                $("#empty-message").css({display:'', overflow: 'hidden'});
            } else {
                $("#empty-message").empty();
                $("#empty-message").css({display:'none', overflow: 'hidden'});
            }
        }
    });
}
</script>

 Drop1
 <?php
    $mysqli = new mysqli("localhost", "root", "", "2015");
    $bo = $mysqli->query("SELECT * FROM category GROUP BY cat_code ORDER BY id");
    $option = '';
     while($row = $bo->fetch_assoc())
        {
        $option .= '<option value = "'.$row['cat_code'].'">'.$row['category'].'</option>';
        }
    ?>

<select id="main" name="main" onchange="changeAutoComplete(this.value)">
<option value=""  selected="selected">Choose</option>
<?php echo $option; ?>
</select>

<div class="demo-frame">
Tags
<input id="tags" name="items">
<div id="empty-message" style="display:none;"></div>
</div>

autoplete.php

<?php
    $mysqli = new mysqli("localhost", "root", "", "2015") or die("Database Error");
    $auto = $mysqli->real_escape_string($_GET["term"]);
    $selected = $mysqli->real_escape_string($_GET["selected"]);

    $sql = $mysqli->query("SELECT * FROM code WHERE item LIKE '%$auto%' AND cat_code='$selected' GROUP BY id ORDER BY item" ); 

    if($sql)
    {
        $str = array();
        while($row=mysqli_fetch_array($sql))
        {
            $str[] = $row['item'];
        }
        echo json_encode($str);
    }
?>

What I need to know how to clear the textbox if the user type only 1 character and don't select on the list? I also have a ajax in autoplete.php which I need to get the value send to textbox.

This what I have right now.

</script>
function changeAutoComplete (val) {
    $( "#tags" ).autoplete({
        mustMatch: true,
        source: 'autoplete.php?selected='+val,
        response: function(event, ui) {
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
                $(this).val("");
                return false;
                $("#empty-message").css({display:'', overflow: 'hidden'});
            } else {
                $("#empty-message").empty();
                $("#empty-message").css({display:'none', overflow: 'hidden'});
            }
        }
    });
}
</script>

 Drop1
 <?php
    $mysqli = new mysqli("localhost", "root", "", "2015");
    $bo = $mysqli->query("SELECT * FROM category GROUP BY cat_code ORDER BY id");
    $option = '';
     while($row = $bo->fetch_assoc())
        {
        $option .= '<option value = "'.$row['cat_code'].'">'.$row['category'].'</option>';
        }
    ?>

<select id="main" name="main" onchange="changeAutoComplete(this.value)">
<option value=""  selected="selected">Choose</option>
<?php echo $option; ?>
</select>

<div class="demo-frame">
Tags
<input id="tags" name="items">
<div id="empty-message" style="display:none;"></div>
</div>

autoplete.php

<?php
    $mysqli = new mysqli("localhost", "root", "", "2015") or die("Database Error");
    $auto = $mysqli->real_escape_string($_GET["term"]);
    $selected = $mysqli->real_escape_string($_GET["selected"]);

    $sql = $mysqli->query("SELECT * FROM code WHERE item LIKE '%$auto%' AND cat_code='$selected' GROUP BY id ORDER BY item" ); 

    if($sql)
    {
        $str = array();
        while($row=mysqli_fetch_array($sql))
        {
            $str[] = $row['item'];
        }
        echo json_encode($str);
    }
?>

• javascript
• jquery

• Can you post all the code i.e. the textbox etc – anthonygore Commented Feb 26, 2014 at 4:36
• check this link this might help you api.jqueryui./autoplete/#event-close – Sohil Desai Commented Feb 26, 2014 at 4:47
• @SohilDesai I think close event is not the place for here. What happens if a character entered is not in the list at all? then the close event will not be triggered. – Praveen Commented Feb 26, 2014 at 5:01
• @SohilDesai Here check this fiddle here try with z and then you will understand what I tried to say – Praveen Commented Feb 26, 2014 at 5:05
• @Praveen: thanks I got your point. Now, I think you are looking for autoplete for bobox. check this jqueryui./autoplete/#bobox – Sohil Desai Commented Feb 26, 2014 at 7:01

1 Answer 1

In your case it better to do this with blur event. Here go with this

$('#tags').on('blur', function () {
    if ($(this).val().length === 1) {  //check for no. of characters entered
        $(this).val('');  // clear the textbox
    }
});

JSFiddle

Updates:

As from your ments, it would be better to go with change event,

 change: function (event, ui) {
              if (!ui.item) {
                  $(this).val("");
                  $('#empty-message').show();
              } else {
                  $('#empty-message').hide();
              }
          }

JSFiddle