{% extends 'base.html' %}

{% block title %}test obj{% endblock title %}

{% block search_nav %}<form class="d-flex" role="search" action="" method="GET">
    <input onfocusout="focusout(this)" id="source" list="itemname" class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="q">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
{% endblock search_nav %}

{% block body %}
{% comment %} {{objects}} {% endcomment %}
{{objects.count}}
<datalist id="itemname">
    {% for obj in objects %}
    {% comment %} {{obj.0}} {% endcomment %}
    {% if obj.itempricelevel__Price %}
    <option value="{{obj.FullName}}" data-price="{{obj.itempricelevel__Price}}"></option>
    {% else %}
    <option value="{{obj.FullName}}" data-price="{{obj.SalesPrice}}"></option>
    {% endif %}
    {% endfor %}
</datalist>
{% comment %} {% for obj in objects %}
{{obj}}
{% endfor %} {% endcomment %}
<div>
    <input id="priceid" class="form-control me-2" value = "0">

</div>

<div id="result">
    test
</div>
<script>

    const source = document.getElementById('source');
    const result = document.getElementById('result');
    const itemname =  document.getElementById('itemname');
    function focusout(e){
        let Text = document.querySelector('option[value="' + e.value + '"]');
        if (Text){
            console.log(e.value);
            console.log(Text.getAttribute('data-price'));
            document.getElementById('priceid').value = Text.getAttribute('data-price');
        }
        else {
            console.log("element not exist");
            document.getElementById('priceid').value = 0;
        }

    }
    const inputHandler = function(e) {
        console.log(e.target.Text);
      result.innerHTML = e.target.value;
    }
    
    source.addEventListener('input', inputHandler);
    source.addEventListener('propertychange', inputHandler);
</script>

{% endblock body %}