автозаполнение jquery textarea не отображается после очистки

Question

Что-то действительно странное происходит с моим кодом: я использую автозаполнение jQuery, чтобы заполнить форму оборудования и отправить ее через ajax.Поскольку вы можете вводить несколько элементов оборудования без обновления браузера, я очищаю все поля, когда открывается диалог с формой.К сожалению, поле textarea очищено, но не заполняется автоматически.Что сбивает меня с толку, так это тот факт, что если я проверяю текстовую область, она отображается заполненной (см. Рисунок) Это действительно работает, если я комментирую $ ("#text"). Val ('');линия (конечно, поле не сбрасывается).Ошибки не отображаются.Что может быть причиной такого поведения?Как можно меньше, вот код:

<script>
$(document).ready(function() {
var equipment = [

              {
                id: "",
                label: "",
                text: "",
                category: "",
                rev_type: "",
                price: "",
                cost: "",
                time: ""
              },
            {
            id: "1",
            label: "Delete",
            text: "",
            category: "4",
            rev_type: "1",
            price: "0.00",
            cost: "0",
            time: "0"
            },
            {
            id: "32",
            label: "Samsung 55\" LED Monitor",
            text: "",
            category: "3",
            rev_type: "1",
            price: "650.00",
            cost: "150",
            time: "60"
            },
            {
            id: "31",
            label: "ART Audio DI",
            text: "",
            category: "4",
            rev_type: "1",
            price: "55.00",
            cost: "0",
            time: "0"
            },
            {
            id: "30",
            label: "Whirlwind PC Stereo DI",
            text: "",
            category: "4",
            rev_type: "1",
            price: "55.00",
            cost: "0",
            time: "0"
            }
];
</script>
<script>
$(document).ready(function(){
        updateTotal();

        function clearForm() {
            // clean fields
            $( "#text").val('');
            return false;
        }

        $( document).on( 'click', '.add_edit_equipment', function(){
           clearForm();
           /* ***** Dialog ***** */
        });
});
</script>

<script>
$(document).ready(function() {
$("body").on("focus", ".equipment", function() {
    $( this ).autocomplete({
        source: equipment,
        focus: function( event, ui ) {
            $( "#add_edit_form #equipment" ).val( $(this).html(ui.item.label).text() );
            return false;
        },
        select: function( event, ui ) {
            $( "#text" ).html( ui.item.text ).text();
            itemSubTotal();
            return false;
        }
    })
});

Поле, которое вызывает у меня проблемы:

<textarea id="text" class="form-control" name="text" cols="55" rows="5" placeholder="Description"></textarea>

ОТВЕТ: Я до сих пор не знаю, почему он перестал работать и дал мне этопроблема, но она снова заработала, когда я заменил следующую строку

$( "#text" ).html( ui.item.text ).text();

на

$( "#text" ).val( ui.item.text );

Спасибо, ребята!

Answer 1

Вы можете попробовать что-то вроде этого.

Ссылка http://api.jqueryui.com/autocomplete/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<textarea id="text" class="form-control" name="text" cols="55" rows="5" placeholder="Description"></textarea> <br/>
<input type="text" class="equipment" placeholder="Enter text to search"/>
<input type="button" id="clear" value="Clear"/>
<input type="button" id="fill" value="Fill"/>


<script>
	$(document).ready(function(){
		$("#clear").click(function(){
			$( "#text" ).html( "" );	
		});
		$("#fill").click(function(){
			$( "#text" ).html( "X" );	
		});
	
		 var equipment = [
		  "ActionScript",
		  "Asp",
		  "BASIC",
		  "C",
		  "C++",
		  "Erlang",
		  "Fortran",
		  "Groovy",
		  "Haskell",
		  "Java",
		  "Scala",
		  "Scheme"
		];
	
		
		$( ".equipment" ).autocomplete({
			source: equipment,
			select: function( event, ui ) {
				$( "#text" ).html( ui.item.label);
				return true;
			}
		});
		
	});
</script>